Question

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

我想使用这些值来启用或禁用另一个输入字段（简单的matInput），具体取决于用户选择的内容。

我还想默认禁用matInput（在用户从单选组中选择“是”或“否”之前）。

我正在使用Angular反应形式，并具有这些输入的设置形式控件名称。

想象一下，formGroup名称是“ 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的评论，我想更新我的答案以反映在响应式表单上处理此问题的首选方法。我下面的原始答案是“快速又肮脏”的方式，但是如果您想正确执行此操作，则应在创建表单时将myInput初始化为禁用：

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

，然后在单选按钮控件上添加一个“启用器”，如下所示：

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

原始答案

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

您应该只可以将Disabled设置为从属字段的值。

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

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

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

1 个答案:

已更新为首选的反应方式

原始答案