使用ngModel进行Angular 2单选按钮验证

Question

Angular 2的文档讲述了表单验证.但仅适用于输入字段类型文本.我的问题是收音机按钮.

这是HTML:

<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<button type='button' [disabled]="??">Next<button>

如果用户未选择任何值,如何将disabled属性设置为true.

Answer 1

使用模板驱动表单,您可以将模型公开给局部变量并查询errors对象.

<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 [disabled]="genderControl.errors">Next</button>
</form>


export class App {
  gender = null; 
}

Answer 2

既然您没有说出您使用的是哪种表格模块(反应式或模板驱动),那么这是一个反应式表格版本:

HTML

<form [formGroup]="radioTest">
  <input type="radio" name="gender" value='Male' formControlName="gender" [(ngModel)]='gender'>Male
  <input type="radio" name='gender' value='Female' formControlName="gender" [(ngModel)]='gender'>Female
  <button type="button" [disabled]="radioTest.controls['gender'].invalid">Gender Button</button>
</form>

组件代码

radioTest: FormGroup;
gender;
constructor(fb: FormBuilder) {
  this.name = 'Angular2'
  this.radioTest = fb.group({
    gender: ['', Validators.required]
  });
}

这是一个Plunker:http://plnkr.co/edit/mWhYtc2nf8hSHFbLWlEx？p = preview