Question

我有一个表单数组，但如果我推送另一个表单，则会设置previus表单的验证。

在此示例中[https://plnkr.co/edit/ApCn3YicMjfm2vhSOudj?p=preview][1] https://plnkr.co/edit/ApCn3YicMjfm2vhSOudj?p=preview您可以看到第二个表单显示了名称验证，我该如何解决？

Answer 1

基于上面的评论并且搞砸了那个笨蛋，我想我终于看到了你在问什么。

问题与表单的工作方式有关。

表格有两部分：

1）表单元素本身显示在视图中。

2）表单数据结构，对于活动表单，您可以在组件代码中使用this.user变量进行定义。正是这种数据结构跟踪表单值和有效性状态。

在查看代码时，您的ngFor正在创建多个表单元素（上面的＃1），但使用相同的表单数据结构（上面的＃2）。因此，多个表单将始终显示相同的值并具有相同的验证状态。

您需要构建一个formArray，并为您创建的每个“表单”在该数组中创建一个条目。

我在这里有一个表单数组的示例：https://github.com/DeborahK/Angular2-ReactiveForms

Answer 2

所有表单在这里共享相同的FormGroup，名为“user”，它保存表单数据和状态，因此您可以为每个表单创建单独的FormGroup，也可以每次在submit方法中重置“user”的值，但后者会使当前表格丢失其数据。因为他们共享“用户”。

onSubmit({ value, valid }: { value: User, valid: boolean }) {
console.log(value, valid);
this.data.push(value)
this.user = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(2)]],
  account: this.fb.group({
    email: ['', Validators.required],
    confirm: ['', Validators.required]
  })
});
console.log(this.data)

}

如何在angular中重置表单组数组

2 个答案: