Angular 表单在提交后重置

Question

我有 Angular 表格（非反应式）：

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

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

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

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

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

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）。

Angular 表单在提交后重置

Angular form reset after submit

angular

angular-forms