[英]Angular 2 Radio Button Validation with ngModel
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。
使用模板驱动表单,您可以将模型公开给局部变量并查询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;
}
既然您没有说出您使用的是哪种表格模块(反应式或模板驱动),那么这是一个反应式表格版本:
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
不知道为什么其他答案试图将变量附加到无线电元素,当无线电已经成为ngForm
一部分时,因此执行myForm.valid
会起作用。
这是我的:
<form #f="ngForm">
<input type="radio" value="male" name="gender" [(ngModel)]="gender" required> Male
<input type="radio" value="female" name="gender" [(ngModel)]="gender" required> Female
<button [disabled]="f.valid">Next</button>
</form>
只是一个f.valid
应该做。
使用Angular2验证mat-radio-group
<form [formGroup]="answerTypeFormGroup">
<ng-template matStepLabel>first name</ng-template>
<mat-radio-group formControlName="answerTypeCtrl" required>
<mat-radio-button value="option_1">Option 1</mat-radio-button>
<mat-radio-button value="option_2">Option 2</mat-radio-button>
<mat-radio-button value="option_3">Option 3</mat-radio-button>
</mat-radio-group>
</form>
// if answerTypeFormGroup is not valid show some error
<div *ngIf="!answerTypeFormGroup.valid" >some error</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.