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

Question

简介:

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

我的问题:

实时我在每组 reactiveforms 中都有一个 popup 按钮。因此，在 popup 中出现了特定 value 表单域的输入。因此，如果我复制并在值表单字段中输入另一个输入，现在我单击该特定表单的相应弹出窗口，然后输入相应的 value表单域（重复的）应该存在。但是现在发生的情况是，相应值表单域中存在的所有值都显示为（示例：1,4,6,7）。

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

示例代码：https://codesandbox.io/s/formarraydynamic-forked-di1js?file=/src/app/app.component.html

注意：上面代码的大部分 link 是由用户@VimalPatel 在 Whosebug.I 完成的，我完全相信他编写的代码在那 link

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

Answer 1

创建一个 FormGroup 类型的变量，因为您的表单包含 FormArray。它将保存当前选择的表单。在您的按钮中单击将当前表单作为参数传递给您的显示方法。

<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

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

Getting unique formcontrol values for duplicated formfields angular

javascript

forms

typescript

angular

angular-reactive-forms