Javascript 为重复的formfields获取唯一的formcontrol值

引言：

我有一个反应表单。它包含两个名为name和value的表单字段。因此，我有一个添加按钮，它复制了表单。因此，如果我单击它，表单字段name和value将重复。因此，我尝试使用下面名为value的表单字段的相应输入。我将其分配给表单字段下方的（我指的是html格式的）formvalues。因此，当我在第一个表单中输入值formfield的输入（比如1）时，下面的formvalues变量将更新为输入的输入（1）。现在，如果我复制表单并在值表单字段中输入另一个输入（比如2）。现在，formvalues得到额外的值1,2

我的问题：

我在每套反应表单中都有一个弹出式按钮。因此，在弹出窗口中将显示特定值的输入。因此，如果我复制并在值表单字段中输入另一个输入，现在我单击该特定表单的相应弹出窗口，则相应值表单字段的输入（复制的一个）应该出现。但是现在发生的是，在相应的value formfield中出现的所有值都显示为（例如：1,4,6,7）

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

采样代码：

注意：上面的代码链接大部分是由stackoverflow中的user@VimalPatel完成的。我完全相信他在该链接中编写的代码

---

我无法在沙盒代码中安装boostrap，因此我制作了一个显示按钮而不是弹出窗口来显示我获得的值。

创建一个类型为

FormGroup

的变量，因为您的表单包含

FormArray

。它将保存当前选定的表单。在按钮中，单击将当前窗体作为参数传递给show方法

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

Show
openForm（表单：FormGroup）{
this.selectedFormGroup=表单；
}

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

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

{{selectedFormGroup.value | json}

工作代码沙箱

---

我不明白你的问题。你能解释一下你分配的样本代码有什么问题吗？谢谢你的提问。我正在复制表单字段。对于每一组重复的formfields，我都会保留一个弹出窗口，显示特定formfield的输入（在本例中为值formfield的输入）。因此，在我的VS代码中，我尝试并发现当我单击弹出窗口时，所有值formfield的formcontrol值被添加为1,2,3,4，而不是单独显示该特定formfield的值，如2或4。在我的示例代码中，我试图获取特定formfield的输入（尽管有多个值formfields，可以通过单击add按钮进行复制）@Yurzuii在表单下的示例代码中，有一个称为formvalues的东西，它从value中获取所有formfields的值。我只是想为每一组表单保留一个单独的弹出按钮，显示特定值formfield的输入。但在我的vs代码中，我实时地尝试了这个。它不显示特定表单字段中的特定值，而是显示所有以逗号分隔的组合值（如示例代码中所示），1,2,3希望您理解。请询问我是否还不清楚@yurzui请分享您迄今为止尝试过的代码。我在您的codesandbox中没有看到任何与上述功能相关的代码。是否有任何方法可以单独获取value formfield的值（数字）@Vimal如果您正在获取对象，只需使用“this.selectedFormGroup.value.value”来获取值。谢谢。谢谢你的帮助。顺便问一下，当我陷入困境时，你们怎么能马上想出解决方案呢。我的意思是，我知道我是个初学者，你也很有经验。但是，在如此强大的解决问题的能力背后，是什么样的思维过程呢@VimalI强烈建议您在进入Angular或任何其他框架/库之前先使用javascript basic。把你的基本概念弄清楚，否则作为一个开发者，这将是一段相当艰难的旅程。当然，你会按照你说的去做