Primeng: Radio buttons do not get unselected on the same group, with Reactive Forms using formControl instead of formControlName

Created on 9 Dec 2020  路  6Comments  路  Source: primefaces/primeng

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

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-f2wj15-yqzqu3?file=src/app/app.component.html

Current behavior
When using p-radiobutton element with ReactiveFroms, once a radio button gets selected, it never gets unselected. However the form value updates properly.

Expected behavior
Only the current value should be selected on screen

Minimal reproduction of the problem with instructions
Just create a reactive form, with a form control, and a group of radiobuttons. This is a minimal reproduction of the problem:
https://stackblitz.com/edit/github-f2wj15-yqzqu3?file=src/app/app.component.html

and fix in https://github.com/primefaces/primeng/pull/9265 (with https://github.com/primefaces/primeng/commit/b823983c5d12f1a2ea73255159d0ed85fd4ca06a) only work for formControlName is same with name: https://stackblitz.com/edit/github-f2wj15-vde3mw?file=src%2Fapp%2Fapp.component.html

What is the motivation / use case for changing the behavior?
As the original issue is closed without proper fix, I re-report the issue
(related: https://github.com/primefaces/primeng/issues/9440 , https://github.com/primefaces/primeng/issues/9162)
The fix in https://github.com/primefaces/primeng/pull/9265 (with https://github.com/primefaces/primeng/commit/b823983c5d12f1a2ea73255159d0ed85fd4ca06a) is quite limited to the case using formControlName. If formControl is used instead of formControlName, the fix will just not work.

It seems the purpose of https://github.com/primefaces/primeng/commit/b823983c5d12f1a2ea73255159d0ed85fd4ca06a to add if (this.formControlName) condition in ngOnInit /ngOnDestroy/select is trying to not using registry for template-driven forms; but in that case should also take formControl under consideration.
Probably if (this.formControlName) condition in ngOnInit /ngOnDestroy/select should change to if (this.formControlName || this.fromControl) with @Input() formControl: AbstractControl;
.

  • Angular version: 10.X
  • PrimeNG version: 10.X~11.0.0

  • Browser: [all ]

LTS-FIXED-10.1.2 LTS-FIXED-9.2.0 defect

Most helpful comment

@yigitfindikli could you please check this PR: https://github.com/primefaces/primeng/pull/9632 for this issue? Thanks.

We are using PrimeNG in several frontend applications exclusively with reactive form.
Our ui is complex and with many nested formGroup, making hard to use formControlName.
Without this fix we cannot use PrimeNG >= 10 馃槩

IMHO this fix is urgent for core PrimeNG users to make p-radiobutton available for complex usage with reactive form

All 6 comments

@yigitfindikli could you please check this PR: https://github.com/primefaces/primeng/pull/9632 for this issue? Thanks.

We are using PrimeNG in several frontend applications exclusively with reactive form.
Our ui is complex and with many nested formGroup, making hard to use formControlName.
Without this fix we cannot use PrimeNG >= 10 馃槩

IMHO this fix is urgent for core PrimeNG users to make p-radiobutton available for complex usage with reactive form

@yigitfindikli @cagataycivici Could you please check & merge related MR of this issue? This bug make us cannot upgrade Primeng to v10+ 馃槩
https://github.com/primefaces/primeng/pull/9632#issuecomment-749991646
https://github.com/primefaces/primeng/commit/b823983c5d12f1a2ea73255159d0ed85fd4ca06a

Please someone consider it !

+1

+1

this issue caused the radio button to not work properly with ngx-formly 馃槥

Was this page helpful?
0 / 5 - 0 ratings