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不仅通过touched监视formControl的错误状态，还通过表单的提交状态，请参阅低于source code。

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

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

您可以致电FormGroupDirective resetForm（通过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();
}

查看已修复的 demo 。

Answer 2

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

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

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

Answer 3

我在重置formGroup时遇到相同的问题，我采用了Alex Oleksiiuk的一些解决方案，但是我同意H Dog的观点，因为提交仅在单击时有效。最后，这是我的解决方案：

请勿使用ngSubmit指令，而应使用声明变量：

模板：<form [formGroup]="formProduct" #formDirective="ngForm">

控制器：@ViewChild('formDirective') private formDirective: NgForm;

设置重置方法

resetForm() { this.formProduct.reset(); ...// }
到目前为止，提交工作正常，不再显示验证错误。但是，如果您按reset（取消，删除，清除...），则botton再次显示该错误。要解决此问题，只需将type="button"放在按钮标记中。

<button mat-raised-button 
  (click)="save()"
  [disabled]="!formProduct.valid">
  Save
</button>

<button mat-raised-button
  (click)="resetFormProduct()"
  type="button" 
  color="warn">
  Clear
</button>

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

3 个答案: