4

我在组件中创建了一个反应形式，并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 不鼓励这样做

4

3 回答 3

7

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

[attr.disabled]="whatever"

相反，它应该使警告静音。Angular 反应式表单目前不支持通过 formcontrol / formgroup API 禁用组中的单个单选按钮，根据这个开放问题：

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

于 2018-02-20T18:45:29.647 回答
3

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

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

或者

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

否则，如果您不想禁用响应式表单控件，您将使用[disabled]="".

于 2018-02-20T17:51:17.440 回答
0

使用 a 嵌入单选按钮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

于 2020-12-08T10:48:36.547 回答