Different FormGroups with same FormControlName and different Name

[Robert Darabana]

Hello, I have the following scenario. I have a parent Form which is composed by two form groups which share the same formControlNames. When they are rendered, two radio buttons cant be selected simultaneously even if they are from different FormGroups and they have different names. Why formControlName overwritten the name? How can I stop that? Can you tell me please how can I fix the problem?

Zoom With Radio Button (forked) - StackBlitz

Here I reproduce the problem.

Please, offer some support, thanks.

[YuvanShankar Arunagiri]

Hi Robert,

Sorry for delay.

We have validated your sample and found an issue in formControlName. Please refer the below code snippet.

[main-form.component.ts]:

export
class
MainFormComponent
implements
OnInit {

  mainFormGroup: FormGroup;

  @Input('formGroupName') groupName: string;

  constructor(private
fb: FormBuilder) {}

  …

  private
createGroup() {

    return
this.fb.group({

      [this.groupName]: [null, [Validators.required]],

      durationRepresentationStart: [null, []],

      durationRepresentationEnd: [null, []],

    });

  }

[child-form.component.html]:

<ejs-radiobutton

    #radio1

    label="First Checkbox"

    [name]="isFirstForm ? 'name1' : 'name2'"

    value="small"

    checked="true"

    (change)="onChange($event)"

    [formControlName]="groupName"

  >

For your convenience, we have attached the sample link.

Sample link: https://stackblitz.com/edit/zoom-with-radio-button-fq9cqq?file=components%2Fmain-form%2Fmain-form.component.ts

Please get back to us if you need further assistance on this.

Regards,

Yuvan Shankar A