angular - 提交后重置角度表单

Question

我有角形式（非反应性）：

<form #form="ngForm" (submit)="submit(); form.reset()">
 <input ... />
</form>

但是提交后表单没有重置，输入仍然标记为已触摸。

请解释一下，我如何在 Angular 5 中重置表单？

StackBlitz：https ://stackblitz.com/edit/reset-form-demo-jdsdwe2

我想要什么：提交后清除焦点并标记为未触及。

标签： angularangular-forms

Answer 1

@angular/forms当您使用标签时<form>，它会自动创建一个 FormGroup。

对于每个包含的 ngModel 标记，它将创建一个 FormControl 并将其添加到上面创建的 FormGroup 中；此 FormControl 将使用属性名称命名为 FormGroup。

例子：

<form #f="ngForm">
    <input type="text" [(ngModel)]="firstFieldVariable" name="firstField">
    <span>{{ f.controls['firstField']?.value }}</span>
</form>

当您将其标记为standalone: true不会发生时（它不会被添加到 FormGroup）。