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

Question

简介：

我有一个反应形式。它包含两个名为name和value 的表单字段。所以我有一个复制表单的添加按钮。因此，如果我单击它，表单字段名称和值就会重复。所以我尝试使用下面的表单字段命名值的相应输入。我将它分配给（我的意思是 html 中的）表单字段下方的表单值。因此，当我在第一个表单中输入值表单字段的输入（假设为 1）时，下面的formvalues变量将更新为输入的输入（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>&nbsp;openForm(form: FormGroup) {&nbsp; &nbsp; &nbsp;this.selectedFormGroup = form;}在您的模板中，您可以像这样显示所选的表单值。<div *ngIf="selectedFormGroup">&nbsp; &nbsp; {{selectedFormGroup.value | json}}</div>工作代码沙盒https://codesandbox.io/s/formarraydynamic-rqdhc?file=/src/app/app.component.html