Angular 2 Radio Button Validation with ngModel [英] Angular 2 Radio Button Validation with ngModel

问题描述

Angular 2 的文档 介绍了表单验证.但仅适用于输入字段类型文本.我的问题是关于单选按钮.

Angular 2's documentation tells about the form validation. But only for input fields type text. My question is for Radio Buttons.

这是 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.

How to set disabled property to true if user hasn't selected any value.

推荐答案

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

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


export class App {
  gender = null; 
}

这篇关于Angular 2 Radio Button Validation with ngModel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！