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

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。

- Malik Shahzad

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


export class App {
  gender = null; 
}

- Bazinga

---

请你添加一个Plunker链接吗？你的解决方案对我来说不起作用。 - David Barreto

Answer 2

既然您没有说使用哪个表单模块（Reactive或Template driven），这里提供一个Reactive forms版本：

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

此链接是一个Plunker，可以在其中编辑和运行Web应用程序。

- silentsod

---

但是你看他在使用ngModel。 - Bazinga

ngModel 本身在响应式表单和模板驱动表单中都可用。如果在输入框中看到 #inputVariable="ngModel" 或者标记了 ngControl，那么它就是严格的模板驱动表单。相反，他发布的确切代码是开放解释的。我知道文档通常不鼓励在响应式表单中使用 ngModel 绑定，但它确实可用。 - silentsod

你的 Plunker 现在无法使用。虽然已经过去了几年，但你可能想知道。 - online Thomas

Answer 3

其他答案试图将变量附加到单选按钮元素，这并不必要，因为单选按钮已经成为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。

- KhoPhi

---

因为很有可能表单中还有其他的输入项。 - ataravati

Answer 4

使用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>

- Amir Navid

---

欢迎来到 Stack Overflow，虽然这段代码可能回答了问题，但提供关于为什么和/或如何回答问题的额外上下文，将有助于提高其长期价值。请注意不要改变原意，使内容通俗易懂。 - builder-7000