如何根据垫单选按钮的值禁用垫输入字段？

Question

我的表单中有一个 'mat-radio-group'，它有 2 个“mat-radio-button”，其值为 "yes" 和 "no"。

我想根据用户的选择使用这些值来启用或禁用另一个输入字段（简单的 matInput）。

我还想默认禁用 matInput（在用户从无线电组检查 "yes" 或 "no" 之前）。

我正在使用 Angular 响应式表单并为这些输入设置了表单控件名称。

假设表单组名称是 "myForm"。

下面是我的模板中的代码：

<mat-radio-group formControlName="myRadio">
          <mat-radio-button value="yes" required>Yes</mat-radio-button>
          <mat-radio-button value="no" required checked>No</mat-radio-button>
</mat-radio-group>

<mat-form-field>
          <input matInput formControlName="myInput" />
</mat-form-field>

Answer 1

更新了首选反应方式

感谢@Severus 的评论，我想更新我的答案以反映在响应式表单上处理此问题的首选方式。我下面的原始答案是 "quick and dirty" 方式，但如果你想正确地做到这一点，你应该在表单创建中将你的 myInput 初始化为禁用：

FormControl({ value: '', disabled: true })

然后在单选按钮控件上添加一个 "enabler"，如下所示：

this.myForm.get('myRadio').valueChanges.subscribe(value => {
    const enableOrDisable = value !== null ? 'enable' : 'disable';
    this.myForm.get('myInput')[enableOrDisable]();
});

原答案

注意：此方法在使用模板驱动表单时仍然有效，但不应在反应式表单方法中使用。如果在模板表单中使用，您将只需将禁用值设置为绑定到单选按钮的 ngModel。

您应该能够将禁用设置为相关字段的值。

<input matInput formControlName="myInput" [disabled]="!myForm.value?.myRadio" />

然后将表单中 myRadio 的值初始化为 null。如果您将无线电值设置为 true 和 false 而不是 yes 和 no，那么您只需检查 null 值（ myForm.value?.myRadio !== null).

如何根据垫单选按钮的值禁用垫输入字段？

How to disable a mat Input field based on the value of a mat radio button?

angular-material

angular

angular-reactive-forms

更新了首选反应方式

原答案