Angular Template Form sets form as valid whenever any radio button is selected

27 Views Asked by At

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>
0

There are 0 best solutions below