首页 文章

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

提问于
浏览 次
10

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

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

validation angular angular2-forms

4 回答

  • 0

    使用模板驱动表单，您可以将模型公开给局部变量并查询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; 
}
    回复于
  • 9

    既然您没有说出您使用的是哪种表格模块（反应式或模板驱动），那么这是一个反应式表格版本：

    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>

    component code

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

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

    回复于
  • 9

    不知道为什么其他答案试图将变量附加到无线电元素，当无线电已经成为 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 应该做 .

    回复于
  • 0

    使用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>
    回复于

相关问题