Question

一旦表单上的任何按钮被单击，我都在努力重置ngForm的错误。似乎formDirective.submitted方法被调用后，resetForm()仍被切换为true。我不明白为什么调用formDirective.resetForm()不能达到预期的结果。

模板：

<button mat-raised-button color="primary" (click)="testClick()"></button>

组件：

@ViewChild(FormGroupDirective) queryFormDir: FormGroupDirective;
...

testClick() {
    this.queryFormDir.resetForm();
}

单击TestClick按钮会使formDirective.submitted状态变为true，据我所知这是不正确的。

根据Angular API，resetForm()方法是用于重置submitted状态的正确方法，但是我没有预期的行为。

我也尝试过使用ErrorStateMatcher并注意到，当我从下面省略isSubmitted时，验证器的错误消息根本不会在提交时显示，这不是我想要的，但是确实显示验证者的错误消息和submitted状态之间的关系，这是我的问题。

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

我的Angular版本是7.2.2

如何重置我的表单，以便在单击表单上的按钮后隐藏验证者的错误消息？

编辑：

上面的示例是我的情况的简化版本。在第一次使用有效数据正确提交表单后，问题就会出现。该表格旨在用于多个提交。在第一次提交之后，验证器被触发，这不是用户友好的。我希望验证者在完成有效提交并重置表单后不触发。

编辑2：

根据stackblitz的要求。

Answer 1

尝试一下：

testClick() {
    this.queryFormDir.reset();
    this.queryFormDir.setErrors(null);
}

Answer 2

以下内容可能会有所帮助：

引用您的表格：

@ViewChild("myForm")
myForm: NgForm;

并重置：

testClick() {
 this.myForm.form.markAsPristine();
 this.myForm.form.markAsUntouched();
 this.myForm.form.updateValueAndValidity();
}

markAsPristine()：这将表单标记为原始状态，如新鲜。

markAsUntouched():这使表单保持不变。用户尚未互动或在ti上未触发任何事件。

updateValueAndValidity():重新计算控件的值和验证状态。

将以下属性设置为用于修复的按钮：

单击TestClick按钮将生成formDirective.submitted 声明为true，据我所知是不正确的。

type="reset"

Answer 3

将type =“ button”添加到您的按钮中，这将阻止验证错误消息

<button type="button" color="primary" (click)="testClick()">Test Click</button>

单击按钮后如何隐藏ngForm验证器的错误消息

3 个答案: