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

对于“Reactive Form”控件，您应该在表单生成时或稍后设置为disabled。这就是你如何做到这两点：

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

或

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

否则，如果您不想禁用“反应表单”控件，则会使用[disabled]=""。

Answer 2

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

[attr.disabled]="whatever"

而是应该使警告静音。 Angular反应形式目前不支持通过formcontrol / formgroup 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 4中的Reactive窗体内的单选按钮组中有条件地禁用单选按钮

3 个答案: