Have a simple angular template form with simple validation, but whenever any radio option is selected the entire form is validated.
I've tried messing with the standalone values to no avail. Whenever I remove the standalone, the validation seemingly stops working.
<div class="container mt-4">
<div class="card">
<h1>Registration</h1>
<p class="message-p">{{registrationMessage}}</p>
<form #regForm="ngForm">
<div class="form-group">
<label>First Name</label>
<input type="text" required #fname="ngModel" [(ngModel)]="userFirstName" [ngModelOptions]="{standalone: true}"
id="firstname" class="form-control" placeholder="Enter First Name">
<span class="error" *ngIf="fname.invalid && fname.touched">Please Enter a Name</span>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" required #lname="ngModel" [(ngModel)]="userLastName" [ngModelOptions]="{standalone: true}"
id="lastname" class="form-control" placeholder="Enter Last Name">
<span class="error" *ngIf="lname.invalid && lname.touched">Please Enter a Name</span>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" required #eName="ngModel" email [(ngModel)]="email" [ngModelOptions]="{standalone: true}"
id="email" class="form-control" placeholder="Enter Email">
<span class="error" *ngIf="eName.invalid && eName.touched">Please Enter a Valid E-Mail</span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" required #pword="ngModel" [(ngModel)]="password" [ngModelOptions]="{standalone: true}"
id="password" class="form-control" placeholder="Enter password">
<span class="error" *ngIf="pword.invalid && pword.touched">Please Enter a Password</span>
</div>
<div class="form-group">
<input type="radio" required #r1="ngModel" name="flexRadioDefault" value="STUDENT"
[(ngModel)]="role">
<label class="form-check-label" for="flexRadioDefault1">
Student
</label>
</div>
<div class="form-group">
<input type="radio" required name="flexRadioDefault" value="TEACHER"
[(ngModel)]="role">
<label class="form-check-label" for="flexRadioDefault2">
Teacher
</label>
</div>
<button [disabled]="!(regForm.valid && regForm.dirty)" type="submit" class="btn btn-primary" (click)="save()">Register</button>
</form>
</div>
</div>