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

Question

I have a reactive form created in component and some formControls defined on it.

Now i need to disable one of the radio button from a radio button group based on some condition.

How do i do it while creating formControl?

PFB the code snippet:

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

  });
}

inside my template:

    <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>

Now how to disable one of them conditionally? when using [disable] attribute i get some warning in browser console. Angular doesn't encourage doing it

Answer 1

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

[attr.disabled]="whatever"

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

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