为重复的表单字段angular获取唯一的表单控件值

Question

简介：

我有一个反应形式。它包含两个名为名称和值的表单字段。因此，我有一个添加按钮，它会复制表单。因此，如果我单击它，表单字段名称和值会重复。因此，我尝试使用下面名为值的表单字段的各个输入。我将其分配给表单字段下方的formvalues(我指的是html中的那个(。因此，当我在第一个表单中输入值表单字段的输入(比如说1(时，下面的表单值表单字段中输入另一个输入(比如2(。现在formvalues得到额外的值1,2。

我的问题：

实时地，我在每组反应形式中都有一个弹出按钮。因此，在弹出窗口中，会出现特定值表单字段的输入。因此，如果我重复并在值表单字段中输入另一个输入，现在我单击特定表单的相应弹出窗口，则应存在相应值表单字段的输入(重复的一个(。但现在发生的情况是，各个值表单字段中的所有值都显示为(示例：1,4,6,7(。

我不知道这里真正的问题是什么，所以如果我的问题标题有误导性，请原谅我。如果我的解释不清楚，请在下面发表评论。

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

注意：以上代码链接的大部分由用户@VimalPatel在stackoverflow中完成。我完全信任他在链接中写的代码

我无法在那个沙盒代码中安装boostrap，所以我做了一个显示按钮，而不是弹出窗口来显示我得到的值。

Answer 1

创建一个类型为FormGroup的变量，因为表单包含一个FormArray。它将容纳当前选定的表单。在按钮中单击，将当前表单作为参数传递给show方法。

<button (click)="openForm(form)">Show</button>

openForm(form: FormGroup) {
this.selectedFormGroup = form;
}

在您的模板中，您将显示如下所选的表单值。

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

工作代码SandBox

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