时间戳

首页 > 解决方案 > 使用模型重置 Angular 表单

angular - 使用模型重置 Angular 表单

问题描述

我希望能够使用其模型的一些默认值重置 Angular 表单

<form>
  <input type="text" name="text" [(ngModel)]="model.text">
  <button type="reset" (click)="resetModel()">Reset</button>
</form>

并在组件中

model = { text: 'Test' };

resetModel() {
  this.model = { text: 'Test' };
}

这不起作用，因为在设置模型并且文本通过重置设置为空之后发生重置。

我能想到的唯一两件事是使用超时，就像我们曾经用类似的方式污染我们的 AngularJs 应用程序一样

resetModel() {
  setTimeout(() => { this.model = { text: 'Test' }; });
}

https://stackblitz.com/edit/angular-5pdpml

或者使按钮成为普通的旧按钮而不是重置按钮，并将表单传递给重置方法并调用 markAsUntouched 和 markAsPristine。

我真的不喜欢这两个选项中的任何一个。

我尝试为输入提供一个值，以便重置具有默认值，但 Angular 仍将模型设置为 null，即使输入确实具有重置设置的文本。

有没有办法让重置按钮设置默认表单状态而不是将所有绑定设置为空？

标签： angularangular-template-form

解决方案

有一种方法不使用setTimeout. 您可以获取表单的引用并调用其中一个reset或多个resetForm方法（在这种情况下两者都可以）来重置值（和状态）。

<form #myForm="ngForm">
  <input type="text" name="text" [(ngModel)]="model.text">
  <button type="button" (click)="myForm.reset({ text: 'Test' })">Reset</button>
  <!-- <button type="button" (click)="myForm.resetForm({ text: 'Test' })">Reset</button> -->
</form>
{{ model | json }}

这是更新的stackblitz。

您应该注意到按钮不是 typereset而是 regular button，由于某种原因 typereset不起作用。我将进行更多研究，并希望找到原因...

编辑：显然，当使用按钮时，type=reset它会自动将表单值重置为其默认值（如果input控件将是value属性中定义的值）。这在 Angular 表单上下文中似乎是不正确的，不应该使用（关于这里的更多信息）。

此外，甚至不建议reset在表单中使用按钮（根据官方文档），因此我非常有信心type=button在这种情况下使用它是正确的。

您通常应该避免在表单中包含重置按钮。它们很少有用，反而更有可能让误点击它们的用户感到沮丧（通常是在尝试点击提交按钮时）。

reset最后，我会提到和之间的区别resetForm。它们是相同的，除了resetForm也会影响submitted表单的状态（将其设置为false）。更多关于这里。

推荐阅读