Angular 材料：重置反應形式顯示驗證錯誤

Question

我正在使用 angular5 reactivemodule 在我的應用程序中顯示一個表單。 我還使用了 required validator，它隨后會將字段設為紅色並向用戶顯示錯誤消息。

它按預期工作但是當我使用重置表單時

這個.form.reset()

該表格向我顯示了一個驗證錯誤，指出特定字段是必需的。 我還使用 form.markAsPristine() 或 form.markAsUntouched() 使其工作，但在應用可能對的多個組合后問題仍然存在。

例子.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>

例子.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 的錯誤狀態，請參閱下面的源代碼。

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

由於上述原因，您還需要將表單重置為未unsubmitted狀態。

---

您可以調用FormGroupDirective的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. 將表單按鈕類型從'submit'更改為'button'
2. 在這個按鈕上你想設置一個點擊動作為(click)="submitForm()"
3. 在submitForm()方法中執行：

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

這將提交表單並重置其值而不提醒驗證器

Answer 3

將type="reset"添加到重置按鈕對我有用，而不是使用formGroupDirective.resetform() 。

Answer 4

我在重置 formGroup 時遇到了同樣的問題，我采用了 Alex Oleksiiuk 的一些解決方案，但我同意 H Dog 的觀點，因為提交的僅適用於點擊。 最后，這是我的解決方案：

1. 不要使用 ngSubmit 指令，而是使用聲明一個變量：

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

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

2. 設置復位方法

   resetForm() { this.formProduct.reset(); ...// }

3. 到目前為止，提交工作並且不再顯示驗證錯誤。 但是，如果您按重置（取消、刪除、清除...）按鈕，則會再次顯示錯誤。 要解決這個問題，只需將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>

Answer 5

不使用@ViewChild一種更簡單的方法是像這樣設置 HTML：

<form [formGroup]="form" #formGroupDirective="ngForm" (ngSubmit)="submit(form, formGroupDirective)">

然后在你的組件中你做

submit(form: FormGroup, formGroupDirective: FormGroupDirective): void {
  form.reset();
  formGroupDirective.resetForm();
}

經過測試並為我工作！

Answer 6

我嘗試了所有重置表單及其驗證器的方法。 但我無法做到這一點。 我想知道這個問題在 GitHub https://github.com/angular/components/issues/4190上仍然存在。

我嘗試過的方法：

 1. this.myForm.markAsPristine();
 2. this.myForm.marskAsUntouched();

另外，我嘗試使用這些：

 1. this.myForm.reset();
 2. this.myFormDirective.resetForm();

然后我嘗試使用下面的代碼片段重新加載相同的組件而不重新加載整個頁面：

this.router.navigateByURL('/', { skipLocationChange: true }).then(() => {
     this.router.navigate([window.location.pathname]);
});

通過這種方式，我可以將我的表格移動到它的初始 state。我希望它能幫助別人。

Answer 7

我在這里找到的最佳解決方案如何在提交表單后清除墊錯誤的驗證錯誤

使用重置表單