Question

我有一张多次上拉的表单。我需要能够在每次出现时将表单上提交的标志重置为false，以删除上次可能遗留的任何可能的错误消息。

我发现将提交的标志设置为false的唯一方法是使用ngForm.resetForm(model)方法。

这很有效，除了它没有将模型绑定到嵌套在顶级模型中的任何对象。

给出以下对象：

model: {
    firstName: 'John',
    contact: {
        lastName: 'Smith'
    }
}

以及以下输入：

<input type='text' name='firstName' [(ngModel)]='model.firstName' />
<input type='text' name='lastName' [(ngModel)]='model.contact.lastName' />

第一次加载表单时，一切都正确显示。

但是，如果您提交表单然后拨打this.myForm.resetForm(this.model)，则不会绑定model.contact.lastName。它确实绑定了model.firstName。

我添加了一个说明问题here的插件。

有没有办法在resetForm之外重置提交的标志？或者有人可以解释为什么在调用resetForm时model.contact.lastName字段没有正确绑定？

Answer 1

使用表单时，请务必记住它有自己的模型，表示表单上的表单和控件。

当使用反应形式时，我们创建了这个＆＃34;模型＆＃34;使用FormBuilder。

当使用模板驱动的表格时，这个＆＃34;模型＆＃34;是基于具有name属性的HTML元素自动为我们创建的。

如果您查看生成的模型，则会根据firstName属性看到模型属性为lastName和name。

Data Model: { "firstName": "John", "contact": { "lastName": "Smith" } }
Form's Model: { "firstName": "John", "lastName": "Smith" }

这就是为什么它无法找到信息...因为它的内部表单模型与您的数据模型不匹配。

尝试将此添加到您的plunker：

{{myForm.value | json}}<br/>

您将看到生成的表单模型。

您可以使用表单组实现嵌套，如下所示：

  <input type='text' name='firstName' [(ngModel)]='model.firstName' /><br />
  <div ngModelGroup="contact">
  <input type='text' name='lastName' [(ngModel)]='model.contact.lastName' /><br />
  </div>
  <br />

然后，生成的表单模型与您的数据模型匹配：

Data Model: { "firstName": "George", "contact": { "lastName": "Washington" } }
Form's Model: { "firstName": "George", "contact": { "lastName": "Washington" } }

以下是更新的plunker：https://plnkr.co/edit/AqLxE7kJsCAVIOJHBJtt?p=preview

Angular resetForm不适用于嵌套对象

1 个答案: