Angular2模板表单 - 试图了解重置功能

Question

我已经按照模板表单的官方 Angular2 教程进行操作，但在理解原生 reset JavaScript 函数对 Angular2 ngModel 的作用时遇到了一些问题。虽然官方文档中没有明确说明，但我相信reset 将输入值设置为其默认值，即null？

看起来是这样，因为在示例中，我们有一个newHero 函数：

newHero() {
    this.model = new Hero(42, '', '');
}

当我们“重置”表单时，这个函数会被调用：

<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">
    New Hero (official)
</button>

注意newHero 函数将属性name 和power 设置为空字符串。但是由于这个函数执行后，我们也重置了表单heroForm.reset()，新的对象如下：

{ "id": 42, "name": null, "power": null, "alterEgo": null }

这很有趣，不是吗？由于null 不等于空字符串（Difference between null and empty string），我可以声称这是错误的。但它在官方的 Angular2 文档中，所以我不确定 - 我没有做对吗？

我把事情的调用顺序改成了这样：

 <button type="button" class="btn btn-default" (click)="heroForm.reset(); newHero()">
    New Hero (alt)
</button>

这实际上产生了正确的对象，即：{ "id": 42, "name": "", "power": "" }

现在想象一下，如果新对象有一个默认值，假设name 更改为Jessica Alba。 Angular 的官方示例会将这个值覆盖为 null，所以它引出了一个问题，为什么还要有一个重置模型的函数？

这是一个带有 2 个重置按钮的项目，官方和替代按钮（注意顶部的 model JSON）：https://plnkr.co/edit/1w2SSv8qxpOCjfDaJxPz?p=preview

所以我的问题是：文档中的示例是错误的，还是我遗漏了什么？ reset 函数是否真的将值更改为 null？

Answer 1

如果您查看 Angular 源代码，您会看到在 NgForm 实例上调用 reset() 然后调用 NgForm#resetForm(value: any = undefined) 进而调用 FormGroup#reset（记录在 here）：

重置表单组。这意味着默认情况下：

• 该组和所有后代都被标记为原始
• 组和所有后代都标记为未触及
• 所有后代的值将是 null 或 null maps

您还可以通过传入一个状态图来重置为特定的表单状态 匹配表单的结构，以控件名称作为键。

所以是的，默认情况下，在 NgForm 上调用 reset() 会将值重置为 null，无论 null 是否真的是根据您的应用程序的规范“初始值”。但是您可以通过使用 control name : initial value 值的映射调用 resetForm(value) 来覆盖此行为。