angular-material2 - 如何清除角 Material 垫错误的验证错误

Question

添加值后，我尝试重置表单。

表单代码段

<form [formGroup]="addAttributeForm" fxLayout="column">
    <mat-form-field>
      <input matInput formControlName="title" placeholder="Title" required>
      <mat-error>This field is required</mat-error>
    </mat-form-field>
</form>

在组件中

onSubmit(form: FormGroup) {
  // do work
  form.reset();
}

我观察到的是:

表单值设置为空。

但是，仍然会从mat-error中显示验证消息。

我尝试了form.markAsPristine()，form.markAsUntouched()并结合了所有这三个。

如何重置表格，以免显示错误垫？

Answer 1

表单组没有关于是否已提交实际HTML表单的“知识”。它仅跟踪表单值/有效性/启用状态。因此，重置表单组不会重置值，但不会重置有关表单是否为submitted的任何状态。

为此，您需要保留 FormGroupDirective 并在其上调用resetForm()。

表单代码段

<form [formGroup]="addAttributeForm" fxLayout="column">
  <!-- ... -->
</form>

在组件中

@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;

onSubmit(form: FormGroup) {
  // do work
  this.formDirective.resetForm();
}