angular-material2 – 如何清除Angular Material mat-error的验

发布时间：2020-12-17 17:03:43 所属栏目：安全来源：网络整理

导读：我在添加值后尝试重置表单. 表单代码片段 form [formGroup]="addAttributeForm" fxLayout="column" mat-form-field input matInput formControlName="title" placeholder="Title" required mat-errorThis field is required/mat-error /mat-form-field/form

我在添加值后尝试重置表单.

表单代码片段

<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()并将这三者结合起来.

如何重置表单以便不显示mat-error？

解决方法

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

要做到这一点,你需要保持FormGroupDirective并在其上调用resetForm().

表单代码片段

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

在组件中

@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!