Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lisuizhe opened this issue Dec 9, 2020 · 6 comments
Assignees
Labels
LTS-FIXED-9.2.0 Fixed in PrimeNG LTS 9.2.0 LTS-FIXED-10.1.2 Fixed in PrimeNG LTS 10.1.2 Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@lisuizhe
Copy link

lisuizhe commented Dec 9, 2020

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 #9265 (with b823983) 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: #9440 , #9162)
The fix in #9265 (with b823983) 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 b823983 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 ]

@lisuizhe lisuizhe changed the title [re-report] Radio buttons do not get unselected on the same group, with Reactive Forms [re-report] Radio buttons do not get unselected on the same group, with Reactive Forms using formControl instread of formControlName Dec 9, 2020
lisuizhe added a commit to lisuizhe/primeng that referenced this issue Dec 9, 2020
@yigitfindikli yigitfindikli added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Dec 10, 2020
@lisuizhe
Copy link
Author

lisuizhe commented Dec 23, 2020

@yigitfindikli could you please check this PR: #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

@lisuizhe lisuizhe changed the title [re-report] Radio buttons do not get unselected on the same group, with Reactive Forms using formControl instread of formControlName [Re-Report Severe BUG] Radio buttons do not get unselected on the same group, with Reactive Forms using formControl instread of formControlName Jan 12, 2021
@lisuizhe
Copy link
Author

@yigitfindikli @cagataycivici Could you please check & merge related MR of this issue? This bug make us cannot upgrade Primeng to v10+ 😢
#9632 (comment)
b823983

@antsteyer
Copy link

Please someone consider it !

@adama357
Copy link

adama357 commented Mar 2, 2021

+1

1 similar comment
@TheIgel69
Copy link

+1

@YaoaY
Copy link

YaoaY commented Apr 13, 2021

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

@yigitfindikli yigitfindikli self-assigned this Apr 26, 2021
@yigitfindikli yigitfindikli added this to the 11.4.1 milestone Apr 26, 2021
@yigitfindikli yigitfindikli added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Apr 26, 2021
@yigitfindikli yigitfindikli changed the title [Re-Report Severe BUG] Radio buttons do not get unselected on the same group, with Reactive Forms using formControl instread of formControlName Radio buttons do not get unselected on the same group, with Reactive Forms using formControl instread of formControlName Apr 26, 2021
@yigitfindikli yigitfindikli changed the title Radio buttons do not get unselected on the same group, with Reactive Forms using formControl instread of formControlName Radio buttons do not get unselected on the same group, with Reactive Forms using formControl instead of formControlName Apr 26, 2021
@yigitfindikli yigitfindikli added LTS-PORTABLE LTS-FIXED-10.1.2 Fixed in PrimeNG LTS 10.1.2 LTS-FIXED-9.2.0 Fixed in PrimeNG LTS 9.2.0 and removed LTS-PORTABLE labels May 3, 2021
amirch1 added a commit to kaltura/kmc-ng that referenced this issue Oct 5, 2021
* Upgrade to Angular 10.2

* primeng style fixes

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng autocomplete

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* upgrade to Angular 11

* add import statement

* Angular 11 upgrade - style fixes and Auto-complete API changes

* Angular 11 upgrade - style fixes

* Angular 11 upgrade - radio box in reactive form fix for issue primefaces/primeng#9631

* Angular 11 upgrade - style fix

* Angular 11 upgrade - style fixs

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 fixes after master merge

* update kaltura-ng libs

* update clientlib

* typo fix

* fix(live stream): change universal live call to use new RxJS syntax (#945)

* fix(entries/categories): endless load of Entitlements tab (use new RxJS syntax) (#946)

* fix(playlists/details): switch to next/previous playlist (left/right arrows) (#949)

* fix(settings/transcoding): table has wrong width on IE11 (#950)

* typo fix

* fix(entries/edit/flavors/): Match from Drop Folder error due to old RxJS syntax (use new RxJS syntax) (#947)

* fix(categories): After selecting another Category all of them disappear on Move Category (#952)

* fix(entry): IE-11 - Back arrow cut-off in all relevant pages KMCNG-2340 (#948)

* fix(entries/edit): IE-11 - Back arrow cut-off in all relevant pages

* fix(entry): back button is cut-off in IE11

* fix(entries/distribution): refresh button is cut off KMCNG-2320 (#951)

* fix(entries/distribution): refresh button is cut off

* fix(entry/distribution): IE11 - refresh button is cut off

* fix: angular.json

* fix(theme): change controls color to primary, change analytics logo, change header gradient KMCNG-2370 (#953)

* fix(theme): change controls color to primary, change analytics logo, change header gradient

* fix: link colors, logo for dpi 1

* fix(theme): style and RxJS fixes for Angular 11 (#954)

* fix(settings/integration): fix zoom form radio controls

* chore: update kaltura libraries

* fix(playlists/rule based playlist): fix RxJS old syntax issues (#956)

* fix(login/expired password): add validation for new password to be different than old KMCNG-2377 (#958)

* fix(login/expired password): add validation for new password to be different than old

* fix: show new password equality error message at the bottom

* fix(upload/manual-live): add support for DASH stream KMCNG-2376 (#957)

* fix(upload/manual-live): add support for DASH stream

* fix: add DASH to error message

* fix(settings/integration): zoom - copy code without break lines (#961)

* fix(entry/captions): add delete menu option to broken caption KMCNG-2381 (#960)

* fix(entry/captions): add delete menu option to broken caption

* fix: move actions filtering logic

Co-authored-by: Viktor Kyryltsev <85935219+viktor-kyryltsev-kaltura@users.noreply.github.com>
amirch1 added a commit to kaltura/kmc-ng that referenced this issue Oct 28, 2021
* Upgrade to Angular 10.2

* primeng style fixes

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng autocomplete

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* upgrade to Angular 11

* add import statement

* Angular 11 upgrade - style fixes and Auto-complete API changes

* Angular 11 upgrade - style fixes

* Angular 11 upgrade - radio box in reactive form fix for issue primefaces/primeng#9631

* Angular 11 upgrade - style fix

* Angular 11 upgrade - style fixs

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 fixes after master merge

* update kaltura-ng libs

* update clientlib

* typo fix

* fix(live stream): change universal live call to use new RxJS syntax (#945)

* fix(entries/categories): endless load of Entitlements tab (use new RxJS syntax) (#946)

* fix(playlists/details): switch to next/previous playlist (left/right arrows) (#949)

* fix(settings/transcoding): table has wrong width on IE11 (#950)

* typo fix

* fix(entries/edit/flavors/): Match from Drop Folder error due to old RxJS syntax (use new RxJS syntax) (#947)

* fix(categories): After selecting another Category all of them disappear on Move Category (#952)

* fix(entry): IE-11 - Back arrow cut-off in all relevant pages KMCNG-2340 (#948)

* fix(entries/edit): IE-11 - Back arrow cut-off in all relevant pages

* fix(entry): back button is cut-off in IE11

* fix(entries/distribution): refresh button is cut off KMCNG-2320 (#951)

* fix(entries/distribution): refresh button is cut off

* fix(entry/distribution): IE11 - refresh button is cut off

* fix: angular.json

* fix(theme): change controls color to primary, change analytics logo, change header gradient KMCNG-2370 (#953)

* fix(theme): change controls color to primary, change analytics logo, change header gradient

* fix: link colors, logo for dpi 1

* fix(theme): style and RxJS fixes for Angular 11 (#954)

* fix(header): change "create" button, add credentials avatar

* fix: add checking to appUser

* fix: user dropdown position, long user name

* fix layout

* load partner status

Co-authored-by: amirch1 <amir.chervinsky@kaltura.com>
amirch1 added a commit to kaltura/kmc-ng that referenced this issue Dec 16, 2021
* fix(header): change "create" button, add credentials avatar (#955)

* Upgrade to Angular 10.2

* primeng style fixes

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng autocomplete

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* update primeng styles

* upgrade to Angular 11

* add import statement

* Angular 11 upgrade - style fixes and Auto-complete API changes

* Angular 11 upgrade - style fixes

* Angular 11 upgrade - radio box in reactive form fix for issue primefaces/primeng#9631

* Angular 11 upgrade - style fix

* Angular 11 upgrade - style fixs

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 RxJs fixes

* Angular 11 fixes after master merge

* update kaltura-ng libs

* update clientlib

* typo fix

* fix(live stream): change universal live call to use new RxJS syntax (#945)

* fix(entries/categories): endless load of Entitlements tab (use new RxJS syntax) (#946)

* fix(playlists/details): switch to next/previous playlist (left/right arrows) (#949)

* fix(settings/transcoding): table has wrong width on IE11 (#950)

* typo fix

* fix(entries/edit/flavors/): Match from Drop Folder error due to old RxJS syntax (use new RxJS syntax) (#947)

* fix(categories): After selecting another Category all of them disappear on Move Category (#952)

* fix(entry): IE-11 - Back arrow cut-off in all relevant pages KMCNG-2340 (#948)

* fix(entries/edit): IE-11 - Back arrow cut-off in all relevant pages

* fix(entry): back button is cut-off in IE11

* fix(entries/distribution): refresh button is cut off KMCNG-2320 (#951)

* fix(entries/distribution): refresh button is cut off

* fix(entry/distribution): IE11 - refresh button is cut off

* fix: angular.json

* fix(theme): change controls color to primary, change analytics logo, change header gradient KMCNG-2370 (#953)

* fix(theme): change controls color to primary, change analytics logo, change header gradient

* fix: link colors, logo for dpi 1

* fix(theme): style and RxJS fixes for Angular 11 (#954)

* fix(header): change "create" button, add credentials avatar

* fix: add checking to appUser

* fix: user dropdown position, long user name

* fix layout

* load partner status

Co-authored-by: amirch1 <amir.chervinsky@kaltura.com>

* add free trial "start plan" button in header

* add notifications bar

* add introduction video placeholder to the "what's new" window

* display notifications bar only for self serve users

* add self serve options to user settings menu

* add KPF connectivity

* update route for KPF

* update routes

* update server-config-example.json

* fix usage dashboard permissions

* fix usage dashboard permissions

* fix usage dashboard permissions

Co-authored-by: Viktor Kyryltsev <85935219+viktor-kyryltsev-kaltura@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
LTS-FIXED-9.2.0 Fixed in PrimeNG LTS 9.2.0 LTS-FIXED-10.1.2 Fixed in PrimeNG LTS 10.1.2 Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

6 participants