1

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.

Xzenon
  • 1,193
  • 2
  • 15
  • 37
  • Does this answer your question? [Disable Input fields in reactive form](https://stackoverflow.com/questions/42840136/disable-input-fields-in-reactive-form) – msanford Apr 26 '21 at 15:43
  • Similar question here - [disable-a-radio-button-conditionally...](https://stackoverflow.com/questions/48890608/disable-a-radio-button-conditionally-in-a-radio-button-group-inside-reactive-for). Appears there is an open issue at Angular for this scenario. – Rich Tillis Apr 26 '21 at 22:07

1 Answers1

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.

Jideão Filho
  • 85
  • 1
  • 7