Model driven forms support for RadioButton

[KevinHetzelGFL]

I'm submitting a ...

[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)**
Sorry, I'm not able to run  primeng 10.0.0-rc.3 on stackblitz. But the code is very simple: 
 <form [formGroup]="myFormGroup">
      <p-radioButton name="groupname" label="True" [value]="true" formControlName="radio"></p-radioButton>
      <p-radioButton name="groupname" label="False" [value]="false" formControlName="radio"></p-radioButton>
    </form>

**Current behavior**
I have a radio button group with 2 radio buttons inside a model driven form. If i select button one and than button 2, the right value is stored inside the form but in the user interface both radio buttons are selected. Also both have the class "p-radiobutton-checked"

* **Angular version:** 10.0.8
<!-- Check whether this is still an issue in the most recent Angular version -->

* **PrimeNG version:** 10.0.0-rc.3

[tomeyday]

Encounter the same issue. No issue in template-driven forms (ngModel).

[lallenfrancisl]

Encountering the same issue, the class for checked is not getting removed

[raphibolliger]

Same problem for me. I created a Stackblitz Demo to demonstrate de problem.
You can find it here: https://stackblitz.com/edit/primengdemo

[cagataycivici]

Seems to be caused by;

angular/angular#13792

It is a pity that writeValue of p-radioButton is not called by Angular which would fix the issue. There are some workarounds in the link above but not ideal. Don't think if there is something on our end, feel free to provide feedback if you have any.

[KevinHetzelGFL]

But why it was working in primeng v.9 ? The angular issue is much older

[g1thuser]

It's not only wrong for model driven forms. It also doesn't work without using any form at all, see here: https://primengdemo-adrcrr.stackblitz.io/

Furthermore I agree with @keschr and therefore this issue should be considered as a bug. Otherwise radio buttons are only usable with template-driven forms, which is too restrictive imho.

[KevinHetzelGFL]

For all who have the same problem, this workaround solves the problem for now:
control.valueChanges.subscribe(e => {
control.setValue(e, {emitEvent: false});
});

[cagataycivici]

Giving high priority for 10.0.4., @mertsincan @yigitfindikli, this has been around for some time, let's resolve it this week.

[yigitfindikli]

Fixed in #9265

[lisuizhe]

For all who have the same problem, this workaround solves the problem for now:
control.valueChanges.subscribe(e => {
control.setValue(e, {emitEvent: false});
});

Thanks for the solution.
But it only works for few radiobutton.
We have 100+ p-radioButton in production code, which is not smart to do this hotfix and remove later.
I would like to hold back verup plan to v10.x after this issue is resolved

[Sampath-Lokuge]

I also have the same issue. Can we have this fixed soon? i.e. new version

[miguelarcjr]

I also have the same issue.

[tibinvpaul]

Having the same issue! When can we expect the release with the fix?

[akhokhlov]

You refactored this fix to not handle case when formControlName is not defined:
b823983#diff-0c957c5f7a653187d322f440519e449e4b7c0dfc5e59facd35ab1506807b00de

But what if we don't provide formControlName and use formControl created by formly, for example. This fix is not applicable to this case.
I'd prefer to use name to indicate of radiobutton group.

[lisuizhe]

Fixed in #9265

@yigitfindikli
Sorry, but could you check #9162 (comment) ?
as I have confirmed this fix does not work for Model driven forms using formControl

[plfgavilan]

Same issue here. I'm using primeng: 10.0.3

[KevinHetzelGFL]

Same issue here. I'm using primeng: 10.0.3

For me it is working since 10.0.6, my current version is 11.0.0

[Hypenate]

It's still an issue in verion 11.2.0

[cblokland90]

Fixed for me after upgrading from 11.3.2 -> 11.4.2

[mcantonbul]

#9162 (comment)

In addition to this answer in version 10.0.3, if you are using p-radiobutton wrapper, it worked when I did it like this in the component used.

import { NG_VALUE_ACCESSOR, ControlValueAccessor, AbstractControl, NgControl } from '@angular/forms';

@Component({
    selector: 'wrapper-radio',
    template: '<p-radioButton></p-radioButton>',
    providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => WrapperRadioComponent ),
      multi: true
    }]
})
export class WrapperRadioComponent implements AfterViewInit, ControlValueAccessor {
  private control?: AbstractControl;

  constructor(private injector: Injector) {
  }
  
  ngAfterViewInit(): void {
    const ngControl = this.injector.get(NgControl);
    if (ngControl) {
      this.control = ngControl.control;
      this.control.valueChanges.subscribe(e => {
        this.control.setValue(e, { emitEvent: false });
      });
    }
  }
}