javascript - Getting unique formcontrol values for duplicated formfields angular

Question

Introduction:

I have a reactiveform. It contains two form fields named name and value. So I have a add button which duplicates the form. So if I click it the form fields name and value duplicates. So I am trying to use the respective inputs of the formfield named value below. I assign it to (I mean the one in html)formvalues below the form field. So when I enter the input(lets say 1) of the value formfield in the first form, the formvalues variable below gets updated to that input(1) entered. So now If I duplicate the form and enter another input(lets say 2) in that value formfield. Now the formvalues gets extra value 1,2.

Myproblem:

In real time I have a popup button in each set of reactiveforms. So In that popup the input of the particular value formfield appears. So if I duplicate and enter another input in the value formfield and now I click the respective popup of that particular form then the input of the respective value formfield(duplicated one) should be present. But now what a happens is that all the values present in the respective value formfield appears as (Example: 1,4,6,7).

I dont know whats the real issue here so Forgive me if my question title was misleading. Please comment below if my explanation was unclear.

SAMPLECODE: https://codesandbox.io/s/formarraydynamic-forked-di1js?file=/src/app/app.component.html

Note: Most part of the above code link was done by user @VimalPatel here in stackoverflow.I am giving him full credit for the code written in that link

I couldnt install boostrap in that sandbox code, so instead of that I have made a show button instead of popup to show the values I am getting.

Answer 1

Create a variable of type FormGroup as your form contains a FormArray. It will hold the currently selected form. In your button click pass the current form as argument to your show method.

<button (click)="openForm(form)">Show</button>
 
openForm(form: FormGroup) {
     this.selectedFormGroup = form;
}

In your template you get show the selected form value like this.

<div *ngIf="selectedFormGroup">
    {{selectedFormGroup.value | json}}
</div>

Working CodeSandBox

https://codesandbox.io/s/formarraydynamic-rqdhc?file=/src/app/app.component.html