Angular Material:重置反应形式显示验证错误 [英] Angular Material: Reseting reactiveform shows validation error

问题描述

我正在使用 angular5 反应模块在我的应用程序中显示一个表单.我还使用了 required 验证器，它随后会将字段设为红色并向用户显示错误消息.

I am using angular5 reactivemodule to show a form in my application. I had also used required validator which will subsequently make the field in red color and show an error msg to the user.

它按预期工作，但是当我使用

It is working as expected but when I reset the form using

this.form.reset()

this.form.reset()

该表单向我显示了一个验证错误，表明该特定字段是必需的.我还使用了 form.markAsPristine() 或 form.markAsUntouched() 使其工作，但在应用多个可能的组合后问题仍然存在.

the form shows me a validation error that the specific field is required. I also used form.markAsPristine() or form.markAsUntouched() to make it work but the problem persist after applying multiple combination of possible pairs.

example.html

<form [formGroup]="checkForm" (ngSubmit)="submitForm()">
  <mat-form-field>
    <input matInput formControlName="name" placeholder="name" />
    <mat-error *ngIf="checkForm.get('name').errors?.required">
      Name is required.
    </mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput formControlName="email" placeholder="email" />
    <mat-error *ngIf="checkForm.get('email').errors?.required">
      Name is required.
    </mat-error>
  </mat-form-field>
  <button [disabled]="checkForm.invalid" type="submit">add</button>
</form>

example.ts

checkForm  = this.formBuilder.group({
  'name': ['', Validators.required],
  'email': ['', Validators.required]
});

submitForm() {
   this.checkForm.reset();
   // this.checkForm.markAsPristine();
   this.checkForm.markAsUntouched();      
}

感谢任何帮助.

推荐答案

默认，Angular/Material 不仅通过 touched 来观察 formControl 的错误状态code> 以及submitted 表单的状态，见下面源代码.

By default, Angular/Material watch formControl's error state not only by touched but also submitted status of the form, see below source code.

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
  return !!(control && control.invalid && (control.touched || (form && form.submitted)));
                                                                       ^^^^^^^^^^^^^^
}

由于上述原因，您还需要将表单重置为 unsubmitted 状态.

For reason above, you also need to reset the form to unsubmitted status.

你可以调用resetForm of FormGroupDirective(通过ViewChild获取实例)因为它将重置表单数据和提交状态.

You can call resetForm of FormGroupDirective(getting instance by ViewChild) for it will reset both the form data and submit status.

<form #form="ngForm" [formGroup]="checkForm" (ngSubmit)="submitForm(form)">
  ...
</form>

@ViewChild('form') form;

submitForm() {
  this.form.resetForm();
  ...
}

<小时>

您还可以通过使用自定义条件(例如忽略表单的提交状态)实现 ErrorStateMatcher 来覆盖默认的，并将其应用于材料组件.

---

You can also overwrite the default one via implementing ErrorStateMatcher with custom conditions such as ignore submitted status of the form, and apply it on material components.

<mat-form-field>
  <input matInput formControlName="name" placeholder="name" [errorStateMatcher]="errorMatcher" />
  <mat-error *ngIf="checkForm.get('name').errors?.required">
    Name is required.
  </mat-error>
</mat-form-field>

// define custom ErrorStateMatcher
export class CustomErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl, form: NgForm | FormGroupDirective | null) {
    return control && control.invalid && control.touched;
  }
}

// component code
@Component({...})
export class CustomComponent {
  // create instance of custom ErrorStateMatcher
  errorMatcher = new CustomErrorStateMatcher();
}

<小时>

查看已修复的演示.

这篇关于Angular Material:重置反应形式显示验证错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！