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

问题描述

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

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的错误状态表单的状态，请参见以下源代码.

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 (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();
}

---

请参阅固定的 演示 .

---

see fixed demo.

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