为重复的表单域角度获取唯一的表单控件值 [英] Getting unique formcontrol values for duplicated formfields angular

问题描述

简介:

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

我的问题:

实时我在每组反应式中都有一个弹出按钮.因此，在该弹出窗口 中会出现特定值 表单域的输入.因此，如果我在值表单域中复制并输入另一个输入，现在我单击该特定 表单 的相应弹出窗口，则相应 值 表单域的输入(重复的)应该出席.但是现在发生的情况是，各个值表单域中存在的所有值都显示为 (Example: 1,4,6,7).

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

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

注意:以上代码链接的大部分是由用户@VimalPatel 在 stackoverflow 中完成的.我对他在该链接中编写的代码表示完全信任

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

解决方案

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

 ShowopenForm(表单:FormGroup){this.selectedFormGroup = 表单；}

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

{{selectedFormGroup.value |json}}

工作代码沙盒

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

Introduction:

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.

Myproblem:

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: https://codesandbox.io/s/formarraydynamic-forked-di1js?file=/src/app/app.component.html

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

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.

解决方案

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>

Working CodeSandBox

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

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