Angular 中的 Reactive 表单中的单选按钮组中有条件地禁用单选按钮 4+

Question

我在组件中创建了一个响应式表单，并在其上定义了一些 formControls。

现在我需要根据某些条件禁用单选按钮组中的其中一个单选按钮。

创建 formControl 时如何操作？

PFB 代码片段：

createForm() {
this.heroForm = this.fb.group({
  confirmActionRadioGrp: this.fb.group({
            updateAction: new FormControl({ value: '' })
        })

  });
}

在我的模板中：

    <div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="3" formControlName="updateAction"></div>

现在如何有条件地禁用其中一个？使用 [disable] 属性时，我在浏览器控制台中收到一些警告。 Angular 不鼓励这样做

Answer 1

对于响应式表单控件，您应该在制作表单时或稍后将其设置为禁用。这就是你如何做到的：

this.heroForm = this.fb.group({
    updateAction: [{ value: null, disabled: true }]
});

或

this.heroForm.get('updateAction').disable();

否则，如果您不想禁用 Reactive Form 控件，您将使用 [disabled]=""。

Answer 2

忽略浏览器警告并在输入上使用禁用属性。如果您愿意，可以使用：

[attr.disabled]="whatever"

相反，它应该使警告静音。 Angular 反应式表单当前不支持通过表单控件/表单组禁用组中的单个单选按钮 API 根据这个未解决的问题：

https://github.com/angular/angular/issues/11763

Answer 3

使用 fieldset 嵌入单选按钮是禁用该特定单选按钮的另一种选择：

<div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
    <fieldset [disabled]="myDisabledCondition || null">
        <input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction"
    </fieldset>
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="3" formControlName="updateAction">
</div>

另见 https://stackblitz.com/edit/angular-radio-bug

Angular 中的 Reactive 表单中的单选按钮组中有条件地禁用单选按钮 4+

Disable a radio button conditionally in a radio button group inside Reactive form in Angular 4+

forms

angular

angular-reactive-forms

angular4-forms