Angular resetForm 不适用于嵌套对象

Question

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

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

除了 ngModel 不绑定到嵌套在顶级模型中的任何对象之外，这已经足够好了。

给定以下对象：

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 就好了。

我已经包含了一个 plunkr 来说明问题 here。

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

Answer 1

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

使用响应式表单时，我们使用 FormBuilder 创建此 "model"。

当使用模板驱动的表单时，这个 "model" 是根据具有 name 属性的 HTML 元素自动为我们创建的。

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

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" } }

这是更新的插件：https://plnkr.co/edit/AqLxE7kJsCAVIOJHBJtt?p=preview

Angular resetForm 不适用于嵌套对象

Angular resetForm does not work for nested objects

angular-ngmodel

angular