Angular 2 单选按钮验证与 ngModel

Posted 2023-03-13

【中文标题】Angular 2 单选按钮验证与 ngModel

【英文标题】：Angular 2 Radio Button Validation with ngModel

【发布时间】：2017-04-29 21:00:29

【问题描述】：

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。

【参考方案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; 

【讨论】：

你能加一个plunker吗？你的解决方案不适合我

【参考方案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

【讨论】：

但是你看到他在使用 ngModel。

ngModel 本身可用于响应式表单和模板驱动。它是严格模板的一个死赠品将是#inputVariable="ngModel" 或在输入的某处标记ngControl。相反，他发布的确切代码可以解释。我知道在文档中通常不鼓励在反应式表单上使用 ngModel 绑定，但它是可用的。

你的 plunker ATM 坏了。多年以后，但您可能想知道。

【参考方案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 就可以了。

【讨论】：

因为您很可能在表单中有其他输入。

【参考方案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>

【讨论】：

欢迎来到 Stack Overflow，虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。