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

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>

 

openForm(form: FormGroup) {

     this.selectedFormGroup = form;

}

在您的模板中，您可以像这样显示所选的表单值。

<div *ngIf="selectedFormGroup">

    {{selectedFormGroup.value | json}}

</div>

工作代码沙盒

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