required and checked input tags not working in an Angular component

Question

I'm making a sign up form for a web application, and I'm trying to make certain fields required, and one of the radio buttons pre-checked, but neither the "required" nor the "checked" input tags seem to have any effect. I am using Firefox as my browser and bootstrap css classes.

When I take out all the Angular related code (the ngForm, ngModel and *ngIf error messages) and just open it in the browser like pure html/css, the radio button becomes checked and the required field do act as they should. So I must have made some logical mistake with my Angular code, which i am fairly new to.

<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>Registration</h1>
    </div>
  </div>
  <form #regForm="ngForm" method="POST" (ngSubmit)= "registrate()">
    <div class="row">
      <div class="col-sm-4">
        <label for="firstName">*First name:</label>
      </div>
      <div class="col-sm-8">
        <input
         type="text"
         id="firstName"
         class="form-control"
         name = "firstName"
         #firstName = "ngModel"
         [(ngModel)] = "user.firstName"
         required/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <label for="lastName">*Last name:</label>
      </div>
      <div class="col-sm-8">
        <input
        type="text"
        id="lastName"
        class="form-control"
        name = "lastName"
        #lastName = "ngModel"
        [(ngModel)] = "user.lastName"
        required/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <label for="email">*E-mail:</label>
      </div>
      <div class="col-sm-8">
        <input
        type="text"
        id="email"
        class="form-control"
        name = "email"
        #email = "ngModel"
        [(ngModel)] = "user.email"
        required/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <label for="occupation">Occupation:</label>
      </div>
      <div class="col-sm-8">
        <input
        type="text"
        id="occupation"
        class="form-control"
        name = "occupation"
        [(ngModel)] = "user.occupation"/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <label for="username">*Username:</label>
      </div>
      <div class="col-sm-8">
        <input
        type="text"
        id="username"
        class="form-control"
        name = "username"
        #username = "ngModel"
        [(ngModel)] = "user.username"
        required/>
      </div>
    </div>
    <div class="row" *ngIf="regForm.submitted && nameExists">
      <div class="col-sm-6" style="margin: auto">
        <p style="color: red; text-align: center">The desired username already exists</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
          <label for="password1">*Password:</label>
      </div>
      <div class="col-sm-8">
          <input
          type="password"
          id="password1"
          class="form-control"
          name = "password1"
          pattern="^(?=.{8,12}$)(?!.*(\S)\1{2})(?=.*[A-Z])(?=.*[a-z]{3})(?=.*\d)(?=.*[^a-zA-Z0-9])([a-zA-Z]\S*)$"
          #password1 = "ngModel"
          [(ngModel)] = "user.password1"
          required/>
      </div>
    </div>
    <div class="row" *ngIf="regForm.submitted && password1?.errors.pattern">
      <div class="col-sm-6" style="margin: auto">
        <p style="color: red; text-align: center">Bad password!</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
          <label for="password2">*Re-enter your password:</label>
      </div>
      <div class="col-sm-8">
          <input
          type="password"
          id="password2"
          class="form-control"
          name = "password2"
          #password2 = "ngModel"
          [(ngModel)] = "checkPassword"
          required/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
          <label>Gender:</label>
      </div>
      <div class="col-sm-4">
            <label for="male">male:</label>
            <input
            type="radio"
            name="gender"
            id="male"
            value="male"
            checked
            #gender1 = "ngModel"
            [(ngModel)] = "user.gender"/>
      </div>
      <div class="col-sm-4">
            <label for="female">женски:</label>
            <input
            type="radio"
            name="gender"
            id="female"
            value="female"
            #gender2 = "ngModel"
            [(ngModel)] = "user.gender"/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
          <label for="idNumber">*ID number:</label>
      </div>
      <div class="col-sm-8">
          <input
          type="text"
          id="idNumber"
          class="form-control"
          name = "idNumber"
          #idNumber = "ngModel"
          [(ngModel)] = "user.idNumber"
          required/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <label for="question">*Security question:</label>
      </div>
      <div class="col-sm-8">
        <input
        type="text"
        id="question"
        class="form-control"
        name = "question"
        #question = "ngModel"
        [(ngModel)] = "user.question"
        required/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <label for="answer">*Answer:</label>
      </div>
      <div class="col-sm-8">
        <input
        type="text"
        id="answer"
        class="form-control"
        name = "answer"
        #answer = "ngModel"
        [(ngModel)] = "user.answer"
        required/>
      </div>
    </div>
    <div class="row" *ngIf="regForm.submitted && (firstName.invalid || lastName.invalid || email.invalid || username.invalid || password1.invalid || password2.invalid || idNumber.invalid || question.invalid || answer.invalid)">
      <div class="col-sm-6" style="margin: auto">
        <p style="color: red; text-align: center">Input fields marked with * must be filled!</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12" style="text-align: center">
        <button type="submit" class="btn btn-primary">
          Register
        </button>
      </div>
    </div>
  </form>
</div>

Note that my .ts class has these fields: user is an object with all the fields used here, checkPassword is a string used to match passwords, nameExists is a boolean that is set to false, registrate() is a function that does nothing for now.

Answer 1

Solved the checked tag by setting the starting value of user.gender to "male". It was an empty string by default and checked tag seems to have been canceled out by it.

required tag seems to be working from Angular's perspective (ngModels are invalid), just does not have the "normal" html behavior - the inputs don't get a red border, and the usual "Please fill out this field" message doesn't show. Is this expected?

Answer 2

These attributes (required and checked) in angular should be used as shown in below examples..

<input type="text" id="test2" name="test2" [(ngModel)]="test" [required]="true">

and

<input type="checkbox" [checked]="true" />