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

单击表单上的任何按钮后，我正在努力重置

ngForm

的错误。即使调用了

resetForm（）

方法，似乎

formDirective.submitted

也会被切换为true。我不明白为什么调用

formDirective.resetForm（）

没有预期的结果

模板：

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

单击

TestClick

按钮将生成

formDirective。提交的
状态为
true
，据我所知，这是不正确的

根据说明，
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));
  }
}

我的角度版本是7.2.2

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

编辑：

上面的例子是我的情况的简化版本。在第一次正确提交表单并提供有效数据后，会出现此问题。该表单是为多次提交而设计的。在第一次提交后，将触发验证程序，这对用户不友好。我希望验证程序在有效提交完成并重置表单后不会触发

编辑2:

根据要求。
尝试以下操作：

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

试试这个：

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

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

请参考您的表格：

@ViewChild("myForm")
myForm: NgForm;

和重置：

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

markAsPristine（）
：这将表单标记为原始状态，如新的和新的

markAsUntouched（）：
这会使表单处于未触及状态。用户尚未交互或ti上未触发任何事件

updateValueAndValidity（）：
重新计算控件的值和验证状态

为按钮设置以下属性以进行修复：

单击TestClick按钮将生成formDirective.submitted
陈述为真，从我所能看出这是不正确的

type=“reset”
以下内容可能会有所帮助：

请参考您的表格：

@ViewChild("myForm")
myForm: NgForm;

和重置：

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

markAsPristine（）
：这将表单标记为原始状态，如新的和新的

markAsUntouched（）：
这会使表单处于未触及状态。用户尚未交互或ti上未触发任何事件

updateValueAndValidity（）：
重新计算控件的值和验证状态

为按钮设置以下属性以进行修复：

单击TestClick按钮将生成formDirective.submitted
陈述为真，从我所能看出这是不正确的

type=“reset”
将type=“button”添加到您的按钮，以防止出现验证错误消息

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

测试点击
将type=“button”添加到您的按钮，以防止出现验证错误消息

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

测试点击
出现错误时如何提交表单？一旦你修复了错误，那么你应该能够提交它，错误就会消失？再读一遍，他要求重置。不提交。：）上面的例子是我的情况的简化版本。在第一次正确提交表单并提供有效数据后，会出现此问题。该表单是为多次提交而设计的。在第一次提交后，将触发验证程序，这对用户不友好。我希望验证程序在有效提交完成且表单重置后不会触发。请检查我的答案，每次重置并将错误设置为null。将
type=“reset”
添加到按钮。这不会标记已提交的表单。当您有错误时，如何提交表单？一旦你修复了错误，那么你应该能够提交它，错误就会消失？再读一遍，他要求重置。不提交。：）上面的例子是我的情况的简化版本。在第一次正确提交表单并提供有效数据后，会出现此问题。该表单是为多次提交而设计的。在第一次提交后，将触发验证程序，这对用户不友好。我希望验证程序在有效提交完成且表单重置后不会触发。请检查我的答案，每次重置并将错误设置为null。将
type=“reset”
添加到按钮。这不会标记提交的表格。谢谢Maihan。不幸的是，testClick（）的添加并没有改变行为。更改按钮的类型确实会产生影响，但是我需要能够控制何时根据条件重置表单，这就是我尝试使用formReset（）的原因。使用type=“reset”，我的表单将被强制重置。谢谢Maihan。不幸的是，testClick（）的添加并没有改变行为。更改按钮的类型确实会产生影响，但是我需要能够控制何时根据条件重置表单，这就是我尝试使用formReset（）的原因。使用type=“reset”，我的表单将被迫重置。此代码不起作用，但我猜您指的是在表单中的每个控件上设置错误。我确实尝试过这样做，但是它改变了目标控件在连续表单提交时的验证行为，基本上禁用了我的验证。setError用于手动验证。此代码不起作用，但我猜您指的是在表单中的每个控件上设置错误。我确实尝试过这样做，但是它改变了目标控件对连续表单提交的验证行为，基本上禁用了我的validatio