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.

Does this answer your question? Disable Input fields in reactive form — msanford
– msanford, Commented Apr 26, 2021 at 15:43
Similar question here - disable-a-radio-button-conditionally.... Appears there is an open issue at Angular for this scenario. — Rich Tillis
– Rich Tillis, Commented Apr 26, 2021 at 22:07

Jideão Filho · Accepted Answer · 2021-04-26 15:20:33Z

0

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.

answered Apr 26, 2021 at 15:20

Jideão Filho

851 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

java-addict301 Over a year ago

does not work I'm afraid

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related