Disable radio buttons in reactive form based on function value in Angular

Question

I have an input made up of radio buttons, but I want to disable some of them based on a function value (which depends on the component's input). If I try to do this, I get a warning about using disabled attribute in a reactive form.

<div *ngFor="let option of options">
  <p-radioButton [inputId]="option.id" name="option" [value]="option" formControlName="option" [disabled]="foo(option)"></p-radioButton>
  <label [for]="option.id">{{ option.name }}</label>
</div>

Using the warning's suggestion, I am supposed to use a FormControl and set its disabled to true/false, but I'm not sure I understand how I would be able to do this with my radio buttons.

Answer 1

Maybe you can try [attr.disabled]="foo(option)" .

Also, if you prefer changing at the typescript code, there is a discussion about Disable Input fields in reactive form that I think maybe can help you.