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

Question

简介：

我有一个reactiveform。它包含两个名为 name 和 value 的表单字段。所以我有一个复制表单的 add 按钮。因此，如果我单击它，表单字段 name 和 value 会重复。因此，我尝试使用下面名为 value 的表单字段的相应输入。我将它分配给（我的意思是 html 中的那个）formvalues 在表单字段下方。因此，当我在第一个表单中输入 value 表单字段的输入（比如说 1）时，下面的 formvalues 变量会更新为输入的输入（1）。所以现在如果我复制表单并在该 value 表单字段中输入另一个输入（比如说 2）。现在 formvalues 获得额外的价值 1,2。

我的问题：

在每组 reactiveforms 中，我实时都有一个 popup 按钮。所以在那个 popup 中出现了特定 value 表单域的输入。因此，如果我在值表单字段中复制并输入另一个输入，现在我单击该特定 form 的相应弹出窗口，则相应 value 表单字段的输入（重复一个）应该出席。但是现在发生的情况是，相应值表单字段中存在的所有值都显示为（示例：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