Disabling one radioButton in a reactive form directive gives warning

[IanIsFluent]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior The only way to disable a single radio in Angular currently is to set it on the radioButton itself. I can't set it on the control object. But:

<p-radioButton name="a" value="a" formControlName="ctrl"/>
<p-radioButton name="b" value="b" formControlName="ctrl" [disabled]="true"/>

Gives warning:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

Example: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) });

Expected behavior No warning

What is the motivation / use case for changing the behavior? I don't like warnings.

• Angular version: 9.1.12

• PrimeNG version: 11.1.0-rc.1

• Browser: all

• Language: all

[mantissa7]

I hope this time it isn't immediately closed again like https://github.com/primefaces/primeng/issues/9143. I tried [attr.disabled] but that is ignored by p-radioButton.

[mountpoint]

@yigitfindikli This thing is still actual. Please take a look at this

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[IanIsFluent]

I hope this time it isn't immediately closed again like #9143. I tried [attr.disabled] but that is ignored by p-radioButton.

Well, you got your wish. It wasn't immediately closed. It was closed some time later instead 🙄

[sbarlabanov]

Now there is not only warning but it stopped working on PrimeNG 16.x: the radio buttons in a reactive form are not disabled at all when putting disabled attribute on them. In 14.x version there was a warning but the input fields were disabled. Now they are not disabled at all. Just try reactive form example from the documentation and put [disabled]=true on p-radioButton in the html.

[mehmetcetin01140]

Hi,

The issue you mentioned seems to appear in an outdated version of ours. Between the version you referred to and our current version (v17x), we've made numerous improvements, bug fixes, and enhancements, so the issue might have been addressed. If you encounter it in the current version as well, please open an issue with a Stackblitz example.

[nkosi23]

I confirm that this is still an issue, and quite an annoying one.

[IanIsFluent]

I confirm that this is still an issue, and quite an annoying one.

They will ignore this now. You'd need to create a stackblitz for them to do anything about it I guess 🙄

[nv-marcel-kaleta]

This issue still persists and I don't think a random improvement will fix it. This needs to be directly adressed. Here is a direct comparison between Angular Material's checkboxes and the ones currently present in PrimeNG:

PrimeNG: https://stackblitz.com/edit/afk2ph Material: https://stackblitz.com/edit/spkqu7

PrimeNG's "disabled" attribute on the radio currently does not do anything and simply produces a warning in the console. This is actually a problem with radios in general when using Angular. The formControlName directive would disable the associated FormControl and thus disable all radios. Usually the workaround for this is to use [attr.disabled] on the radio (as @mantissa7 mentioned, this is actually a "supported workaround" see here). Material went a different route and simply does not allow you to use radios in a form without a group that manages the control. This way you can disable individual radios or the whole group.

To fix this issue in PrimeNG we would either have to implement a similar "group", or simply add an option like "visuallyDisabled" to prevent disabling the whole control. I would actually prefer the second option.

For anyone having this issue right now:

The workaround is to not associate your radio with your form. Simply use the ngModel directive and set the value manually. You have to prevent Angular from disabling the form.

For example:

<div class="card flex justify-content-center">
  <div *ngFor="let category of categories" class="field-checkbox">
    <p-radioButton
      [inputId]="category.key"
      [value]="category.key"
      [disabled]="category.key === 'A'"
      [(ngModel)]="selectedCategory"
    />
    <label [for]="category.key" class="ml-2"> {{ category.name }} </label>
  </div>
</div>

And set the value manually into the form (maybe you could even use a Signal here):

_selectedCategory: string;
get selectedCategory(): string {
  return this._selectedCategory;
}
set selectedCategory(value: string) {
  this.formGroup.patchValue({
    selectedCategory: value
  });
  this._selectedCategory = value
}

[OmkarJ13]

This is still broken