为重复的formfields角获取唯一的formcontrol值 [英] Getting unique formcontrol values for duplicated formfields angular

问题描述

简介:

我有一个反应形式.它包含两个名为 name 和 value 的表单字段.因此，我有一个添加按钮，该按钮复制了表单.因此，如果我单击它，表单字段名称和值将重复.因此，我尝试使用下面名为 value 的表单域的各个输入.我将其分配给表单字段下面的(在html中是一个) formvalues .因此，当我在第一个表单中输入 value 表单域的输入(比如说1)时，下面的 formvalues 变量将更新为输入的输入(1).现在，如果我复制该表单并在该 value 表单字段中输入另一个输入(例如2).现在， formvalues 获得1,2的额外价值.

I have a reactiveform. It contains two form fields named name and value. So I have a add button which duplicates the form. So if I click it the form fields name and value duplicates. So I am trying to use the respective inputs of the formfield named value below. I assign it to (I mean the one in html)formvalues below the form field. So when I enter the input(lets say 1) of the value formfield in the first form, the formvalues variable below gets updated to that input(1) entered. So now If I duplicate the form and enter another input(lets say 2) in that value formfield. Now the formvalues gets extra value 1,2.

我的问题:

我在每组反应形式中都有一个弹出按钮.因此，在该弹出窗口中，将显示特定 value 表单字段的输入.因此，如果我复制并在值formfield中输入另一个输入，然后单击该特定 form 的相应弹出窗口，则相应的 value formfield(重复一个)的输入应出席.但是现在发生的是，相应值表单域中存在的所有值都显示为(例如:1、4、6、7).

In real time I have a popup button in each set of reactiveforms. So In that popup the input of the particular value formfield appears. So if I duplicate and enter another input in the value formfield and now I click the respective popup of that particular form then the input of the respective value formfield(duplicated one) should be present. But now what a happens is that all the values present in the respective value formfield appears as (Example: 1,4,6,7).

我不知道这里的真正问题是什么，因此，如果我的问题标题令人误解，请原谅我.如果我的解释不清楚，请在下面发表评论.

I dont know whats the real issue here so Forgive me if my question title was misleading. Please comment below if my explanation was unclear.

SAMPLECODE : 注意:上面的代码链接的大部分由用户@VimalPatel在stackoverflow中完成.我完全赞扬他在该链接中编写的代码

Note: Most part of the above code link was done by user @VimalPatel here in stackoverflow.I am giving him full credit for the code written in that link

我无法在该沙箱代码中安装boostrap，因此，我改为使用显示按钮而不是弹出窗口来显示我得到的值.

I couldnt install boostrap in that sandbox code, so instead of that I have made a show button instead of popup to show the values I am getting.

推荐答案

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

Create a variable of type FormGroup as your form contains a FormArray. It will hold the currently selected form. In your button click pass the current form as argument to your show method.

<button (click)="openForm(form)">Show</button>
 
openForm(form: FormGroup) {
     this.selectedFormGroup = form;
}

在模板中，您将像这样显示选定的表单值.

In your template you get show the selected form value like this.

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

工作CodeSandBox

Working CodeSandBox

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

这篇关于为重复的formfields角获取唯一的formcontrol值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！