Radio Buttons in a Form Array affect all Radio Buttons in the Array

[acgritt]

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 Selecting a radio button in one group of a Form Array causes all other radio buttons in other groups to change their value selections. As this is a Form Array all the formControlName values for the radio buttons are the same.

Expected behavior When selecting a radio button in one group in a Form Array it should have no impact on the radio buttons in another group.

Minimal reproduction of the problem with instructions https://stackblitz.com/edit/primeng-radio-form-array-selection-issue

What is the motivation / use case for changing the behavior? I should be able to dynamically render questions in a Form Array with radio buttons. This was working for Angular 10 but is not in Angular 11.

Please tell us about your environment: Windows 10 Angular 10 PrimeNG 11 VS Code .NET 3.1

• Browser: all

• Language: TypeScript 4.0.5 | ES6/7

• Node (for AoT issues): node --version = v12.19.0

[AlbaSS18]

I have the same problem ☝️. Does someone know solve this? Please, It's urgent

[acgritt]

@AlbaSS18 I have not found one, other than don't upgrade to PrimeNG 11. Given that the formControlName and the name properties have to match in PrimeNG 11, which is how we have it implemented in PrimeNG 10, you can't change the name to be indexed.

[lordnedox]

+1 here, it's unusable inside Form Arrays, please fix

[lucacolli]

Is there any news on the resolution of this bug? The component is absolutely unusable....

[AntonioQOAtos]

Or when it's planned to solve it

[zahid492]

Any update regarding this issue?

[jinzai07]

I am also encountering this problem, any updates?

[mjasonlouw]

I'm having the same issue. Any suggested workarounds?

[acgritt]

I ended up re-factoring our implementation to use a ngForEach which adds the index to the name (ie radio-buttons-1). Then when I build up the form control I create the property names for each object as such and undo the same on submit. I hated having to add the code to do this but it was what was needed to upgrade the framework and not be stuck on an old version as it seems this is not likely to be fixed or get any other attention from PrimeFaces right now without purchasing a support agreement.

[jinzai07]

I'm having the same issue. Any suggested workarounds?

I temporarily ended up implementing it the native way and just aligning the style with primeng as I've implemented their radio buttons in other parts of our project and don't want the trouble of replacing them all.

[nnaaa-vr]

This seems a lot like https://github.com/primefaces/primeng/issues/9162 rearing its ugly head again, except now for some reason I haven't had the time to discover, the workaround by setting the value with emitEvent as false in a valueChanges subscription isn't working anymore.

[ifynk]

The same issue with version 12.2.1

[odaper]

Any news please about this issue? is there a soon fix or a workarround? Many thanks

[king-in-it]

Using version V11-LTS and still doesn't work due to the checkName() function (https://github.com/primefaces/primeng/blob/11.4.5/src/app/components/radiobutton/radiobutton.ts#L185) of p-radioButton. Workaround here was to use [formControl] (instead of formControlName) together with a unique name per record (e.g. by appending the index of the for-loop). See the forked PrimeNG RadioButton demo for the workaround: https://stackblitz.com/edit/primeng-radiobutton-demo-hdgumd?file=src%2Fapp%2Fapp.component.ts

[yadhunandhanr]

Was facing the same issue with template driven forms in Angular. And giving the value for name attribute dynamically like this name : "someName_{{i}}" solved the problem where i is the index of the array being iterated.

[deepan094]

SOLVED

i = Formarray index

<div  *ngFor="let category of categories;let indexCat=index" class="p-field-checkbox">
      <p-radioButton inputId="key-{{i}}-{{indexCat}}" 
name="radioChk{{i}}" [value]="category" formControlName="radioChk{{i}}">
</p-radioButton>      
      <label for="key-{{i}}-{{indexCat}}">{{category.name}}</label>
      </div>

Build form control with same name as in HTML -

  (<FormGroup>this.formArray.at(index))
.get('radioChk'+index).setValue(this.categories[0]);

[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,

[majkers]

@acgritt can You please verify it? I think it still exists in 14.2.1 version

[kiran-pathe]

I'm having the same issue. Any suggested workarounds?

I temporarily ended up implementing it the native way and just aligning the style with primeng as I've implemented their radio buttons in other parts of our project and don't want the trouble of replacing them all.

Thanks. working fine with native radio input.

[DeanZamzow-abrigo]

Here is my reproduction with PrimeNG 13 and FormGroup rather than FormArray: https://stackblitz.com/edit/primeng-radiobutton-demo-23vcm8?file=src/app/app.component.html

Note that just using HTML input radio and Angular RadioControlValueAccessor works correctly.

(This is forked from the stackblitz from PrimeNG RadioButton, which is still using PrimeNG 13 rather than latest PrimeNG 15.)

[Tilesto]

Absolutely the same problem for 15.2.0 Inside formArray, like:

<p-radioButton
    [inputId]="variantGroupIndex + '_status_none'"
    [value]="item.value"
    formControlName="status"
></p-radioButton>

it affects all radioButtons with the same value for all groups inside formArray

P.S. But value for formArray binds okay. I don't know why, but only click not working correctly (selects all radios, not only the clicked one)

[Tilesto]

I finally came up with fix) If you use formControlName for p-radioButton - it groups all radios from all formGroups to the one radioGroup. You need to set different names for radioGroups. But you cannot use formControlName and name together (you will get an error)

The fix is:

<p-radioButton
  [inputId]="variantGroupIndex + '_status_' + item.key"
  [value]="item.value"
  [name]="variantGroupIndex + '_status_'"
  [formControl]="variantGroup.controls.status"
></p-radioButton>

If you have some problems with types (AbstractControl instead of FormGroup/FormControl) - create dumb pipe, like

import { Pipe, PipeTransform } from '@angular/core';
import { AbstractControl, FormControl } from '@angular/forms';

@Pipe({
    name: 'formControl',
    standalone: true,
})
export class FormControlPipe implements PipeTransform {
    transform(control: AbstractControl): FormControl {
        return control as FormControl;
    }
}

and use it)

 <p-radioButton
    [inputId]="variantGroupIndex + '_status_' + item.key"
    [value]="item.value"
    [name]="variantGroupIndex + '_status_'"
    [formControl]="(variantGroup | formGroup).controls.status | formControl"
></p-radioButton>

Have a nice day)

[kuntalbose]

The same issue with version 15.4.1

[wiesesascha]

Issue still exists :( [email protected] [email protected]

[fmontes]

We are experimenting the same issue.

[sapabg]

"data" is the name of the FormArray get data() { return this.buySellFormGroup.get('data') as FormArray; }

"type" is the name of the radio FormControl getControl(i: number) { return this.buySellFormGroup.get('data')?.get(i.toString())?.get('type') as FormControl }

<ng-container *ngFor="let row of data.controls; let i = index" [formGroupName]="i"> <p-radioButton value="someType" [formControl]="getControl(i)" [inputId]="i + '_type1'" [name]="i + '_type'" ></p-radioButton> <p-radioButton value="someOtherType" [formControl]="getControl(i)" [inputId]="i + '_type2'" [name]="i + '_type'" ></p-radioButton>

the name needs to be the same for the same control and all the inputIds have to be unique;

[izll]

Same issue here :(

[lamisChebbi]

This issue is still reproduced with version 16 Any workaround please ?

[sapabg]

This issue is still reproduced with version 16 Any workaround please ?

you need an unique inputId attribute on every radio but the same form control (name) on all and it will work!

[capkaempfer]

This issue is still reproduced with version 16 Any workaround please ?

Sadly, yes, but the pipe described by @Tilesto works most of the time

[ViktoriiaBilaniuk]

I finally came up with fix) If you use formControlName for p-radioButton - it group all radios from all formGroups to the one radioGroup. You need to set different names for radioGroups. But you cannot use formControlName and name together (you will get error)

The fix is:

<p-radioButton
  [inputId]="variantGroupIndex + '_status_' + item.key"
  [value]="item.value"
  [name]="variantGroupIndex + '_status_'"
  [formControl]="variantGroup.controls.status"
></p-radioButton>

If you have some problems with types (AbstractControl instead of FormGroup/FormControl) - create dumb pipes, like

import { Pipe, PipeTransform } from '@angular/core';
import { AbstractControl, FormControl } from '@angular/forms';

@Pipe({
    name: 'formControl',
    standalone: true,
})
export class FormControlPipe implements PipeTransform {
    transform(control: AbstractControl): FormControl {
        return control as FormControl;
    }
}

and use it)

 <p-radioButton
    [inputId]="variantGroupIndex + '_status_' + item.key"
    [value]="item.value"
    [name]="variantGroupIndex + '_status_'"
    [formControl]="(variantGroup | formGroup).controls.status | formControl"
></p-radioButton>

Have a nice day)

Thank you!

It trully hellpes to resolve this issue!