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

Question

单选按钮验证在 Angular 7 中不起作用。我正在使用模板驱动的方法。名字、姓氏和部门验证按预期工作。

我采用了与文本字段相同的方法

注册组件.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>

当我单击提交时，单选按钮应显示错误消息，但未显示错误消息。

Answer 1

使用模板驱动的表单，您可以将模型公开给局部变量并查询错误对象。

<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; 
}