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.
