RadioButton doesn't work as expected in FormArray

[Dana Sarghe]

Hello,
Inside a fromArray, a have multiple formGroup with 2 radioButton formControls.
When I check one of them, in a FormGroup, the value of the radioButton is changed (checked) from one formGroup to another, no matter what the order is.
I want that this radioButton to change independently, from one FormGroup to another.

The rest of the input works as expected.
Please, offer some support, thanks.

Template

<div class="radioButton-control row mb-2 mt-4">

<div class="d-flex justify-content-start">

<div class="col-6 badge badge-light text-dark">

<ejs-radiobutton #individual formControlName="personType"

[value]="PersonType.IndividualPerson" label="Persoana fizica"

name="'personType' + {{i}}"

(change)="personTypeRadioButtonSelected($event)">

ejs-radiobutton>

div>

<div class="col-6 badge badge-light text-darkml-5">

<ejs-radiobutton #company formControlName="personType"

label="Persoana juridica" name="'personType' + {{i}}"

[value]="PersonType.LegalPerson"

(change)="personTypeRadioButtonSelected($event)">

ejs-radiobutton>

div>

div>

div>

I tried to change the name by appending the index, but this doesn't work :)

FormArray

(this.coOwnerFormGroup.controls.estateCoOwnerList as FormArray).push(this.fb.group({

firstName: [null, []],

lastName: [null, []],

companyName: [null, []],

cnp: [null, []],

cui: [null],

ownershipPercentage: [null, [Validators.required]],

estateSharePart: [null, [Validators.required]],

estateTotalSharePart: [{ value: this.patchedEstateSharePartTotal, disabled: true }, []],

personType: [null, [Validators.required]],

shareType: [{ value: this.patchedEstateShareType, disabled: true }, []],

})

[YuvanShankar Arunagiri]

Hi Dana,

Sorry for the delay. We have prepared the sample based on your requirement and reason for reported issue is rendering the radio button with same name/formControlName for every added form group. To overcome this issue, we need to assign the unique name/formControlName for every radio button group shown as below.

[app.component.html]:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">

    <div formArrayName="items">

        <div *ngFor="let item of items.controls; let i = index">

            <div [formGroupName]="i">

                <ejs-radiobutton formControlName="personType{{i}}"

                            label="Persoana fizica"

                            name="personType{{i}}"

                            (change)="personTypeRadioButtonSelected($event)">

                </ejs-radiobutton>

                <ejs-radiobutton formControlName="personType{{i}}"

                            label="Persoana fizica"

                            name="personType{{i}}"

                            (change)="personTypeRadioButtonSelected($event)">

                </ejs-radiobutton>

            </div>

        </div>

    </div>

[app.component.ts]:

addItem(): void {

      const newItem = this.formBuilder.group({

        ['personType' + this.i]: [null, [Validators.required]]

      });

      this.items.push(newItem);

      this.i++;

    }

Sample link: https://stackblitz.com/edit/angular-uqqwjk?file=src%2Fapp.component.html

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A