角度材料:重置反应形式显示验证错误

Question

我正在使用angular5 reactivemodule在我的应用程序中显示一个表单.我还使用了必需的验证器,随后将该字段设置为红色并向用户显示错误信息.

它按预期工作,但是当我使用重置表单时

this.form.reset()

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

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

任何帮助表示赞赏.

Answer 1

默认情况下,不仅要Angular/Material查看formControl的错误状态,touched还要提交表单的状态,请参阅下面的源代码.

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

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

您可以致电resetForm的FormGroupDirective(通过获取实例ViewChild),因为它会重置表单资料,并提交状态.

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

@ViewChild('form') form;

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

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

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

看固定演示.

Answer 2

您需要做的就是(ngSubmit)在被动表单上避免使用方法:
1.(ngSubmit)="submitForm()"从表单标签中删除
1.将表单按钮类型从 2 更改'submit'为'button'
2.在此按钮上,您要将单击操作设置为(click)="submitForm()"
3.在submitForm()方法中:

this.checkForm.markAsPristine();
this.checkForm.markAsUntouched();

这将提交表单并重置其值而不提示验证者