提交后角度材料重置表单

Question

我使用有角度的材料，并且有一个带有反应验证的表单。

\n\n

我想在提交后重置我的表单，我的问题是提交后我看到我的错误出现在表单中。

\n\n

输入示例：

\n\n

<mat-form-field>\n  <mat-label>Pr\xc3\xa9nom</mat-label>\n  <input matInput name="prenom" formControlName="prenom">\n  <mat-error *ngIf="f.prenom.hasError(\'required\') && submitted">\n    Ce champ est obligatoire\n  </mat-error>\n  <mat-error *ngIf="f.prenom.errors?.maxlength && !f.prenom.hasError(\'required\')">\n    le pr\xc3\xa9nom ne peut pas d\xc3\xa9passer 20 caract\xc3\xa8res\n  </mat-error>\n</mat-form-field>\n

\n\n

我尝试添加提交的变量和 this.myForm.markAsUntouched() 但不起作用

\n\n

onSubmit() {\n  this.submitted = true;\n  if (this.myForm.invalid) {\n    return;\n  }\n  alert(\'Form Submitted succesfully!!!\\n Check the values in browser console.\');\n  console.table(this.myForm.value);\n  this.submitted = false;\n  this.myForm.reset();\n  this.myForm.markAsUntouched();\n}\n

\n\n

使用提交的变量，我看到消息错误消失（下面的黄色部分），但边框和红色没有消失。

\n\n

\n\n

你们有什么想法来解决这个问题吗？

\n

Answer 1

我能够通过将 #formDirective="ngForm" 放在表单标签中来解决这个问题

<form [formGroup]="myForm" (ngSubmit)="onSubmit()" #formDirective="ngForm">

并声明

@ViewChild('formDirective') private formDirective: NgForm;

然后你可以把 .resetForm()