单选按钮验证在角度7中不起作用

Question

Radio button validation is not working in angular 7. i am using template driven approach. firstname, lastname and department validation are working as expected.

I have followed same approach which i have done for text field

register-component.html

 <form class="form" #e="ngForm" (ngSubmit)="empRegistrationData(e)" >
 <div class="form-group">
  <label for="firstName"> First Name </label>
  <input type="text" class="form-control" id="firstName" required 
      [(ngModel)]="empData.firstName" #firstName="ngModel" 
    name="firstName" [ngClass]="{'is-invalid': e.submitted && 
       firstName.invalid}"/>
          <div *ngIf="e.submitted && firstName.invalid" class="invalid- 
          feedback">
    <div *ngIf="firstName.errors.required">First Name is mandatory</div>
  </div>
</div>

 <div class="form-group">
  <label> Gender </label> <br /> 
  <div class="form-check-inline">
    <label class="form-check-label">
      <input type="radio" class="form-check-input" required name="gender" [(ngModel)]="empData.gender" #gender="ngModel" value="Male" >Male
    </label>
  </div>
  <div class="form-check-inline">
    <label class="form-check-label">
      <input type="radio" class="form-check-input" name="gender" [(ngModel)]="empData.gender" #gender="ngModel" value="Female" required>Female
    </label>
  </div>
  <div *ngIf="e.submitted && gender.invalid" class="invalid-feedback">
      <div *ngIf="gender.errors.required">Gender is mandatory</div>
    </div>
</div>
<div class="form-group">
  <button type="submit" class="btn btn-primary mr-md-3">Register</button>
  <button type="button" class="btn btn-danger" 
     (click)="clearValues()">Clear</button>
</div>
</form>

when i click on submit error message should display for radio button but error message is not displaying.

Answer 1

With template driven forms you can expose your model to a local variable and query the errors object.

<form #f="ngForm">
   <input type="radio" value="male" name="gender" [(ngModel)]="gender" required #genderControl="ngModel"> Male
   <input type="radio" value="female" name="gender" [(ngModel)]="gender" required> Female
   <button type="submit" class="btn btn-primary mr-md-3">Register</button>
</form>


export class App {
  gender = null; 
}