Angular 提交表格并明确验证

我有一种反应形式

 <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>enter items</ng-template>
      <div style="display: flex; flex-direction: column;">
        <mat-form-field>
          <input matInput type="text" placeholder="category"  [(ngModel)]="newItem.CategoryName" formControlName="category"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput type="text" placeholder="sub category"  [(ngModel)]="newItem.SubCategoryName" formControlName="subCategory"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput type="text" placeholder="product"  [(ngModel)]="newItem.ProductName" formControlName="name"/>
        </mat-form-field>
        <mat-form-field>
          <input matInput  [(ngModel)]="newItem.Amount" type="number" min="0" placeholder="amount" formControlName="amount"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput  [(ngModel)]="newItem.Price" type="number" min="0" placeholder="price" formControlName="price"
          />
        </mat-form-field>
        <button mat-raised-button color="primary" (click)="AddNewProduct(newItem)" style="float: left; align-self: flex-end;">submit</button>
      </div>
    </form>

单击sumbit后，我将此方法称为：

AddNewProduct(newProduct) {
if (this.secondFormGroup.valid) {
  //add product
  this.secondFormGroup.reset();
 } 
}

添加产品后，我清除表单。 但是，一旦清除表单，就会触发验证错误。 我希望验证错误仅在用户单击提交且表单无效时显示，而不是在提交后清除表单时显示

---

如何解决此问题？

您可以使用

clearValidators（）

但这将从实际表单组中删除验证程序，并且从下次提交表单时不会显示

错误

更好的方法是：

您可以简单地使用错误模板上的标志，根据表单提交/重置显示错误。并相应地设置/重置标志

public formSubmitted = false;

onSubmit(){
   this.formSubmitted = true;
}

reset(){
   this.formSubmitted = false;
}

模板文件

<div *ngIf="formSubmitted">
 display errors
</div>


显示错误
如果您使用的是
角度材质
输入，则可以通过将输入设置为
未接触
来隐藏错误状态。材料输入字段仅在触摸输入时显示错误状态

所以

this.secondFormGroup.markAsUntouched（）

我们应该做到这一点

您可能必须在此类操作后启动更改检测运行（取决于场景）

这里有概念证明。输入最初处于错误状态。专用按钮清除此状态，直到将来输入

问题似乎在于调用重置后表单被标记为已提交。如果表单被标记为已提交，无论其是否原始，错误都将突出显示

您需要调用
resetForm
，它位于FormGroupDirective上：

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

this.formGroupDirective.resetForm();

其次，您需要将其包装在超时为0的
setTimeout
中，以便在表单重置之前提交表单

setTimeout(() => this.formGroupDirective.resetForm(), 0)

我在StackBlitz中对此进行了测试，所有这些似乎都有效：

此操作有效，请尝试此操作。您需要重置form指令，否则它将无法100%停止窗体



模板：

<form 
  ...
  #formDirective="ngForm" 
>

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}

谢谢，但我不想只显示或隐藏错误的元素。我想像默认样式一样将字段标记为红色。如果清除验证程序，我已经添加了更多说明。请检查一下。实际上，调用重置会将它们标记为原始状态anyway@user184994很高兴知道，谢谢你的反馈。但是等等，OP说他重新设置了表单。@amitairos ofc it工作，只是你不知道如何使用它。声明“不工作”对我来说毫无意义，因为在你的情况下，可能有10000个原因说明它不工作。我只能猜测您需要像我在上一句中所说的那样运行更改检测。@Antoniossss尝试使用更改检测，但它仍然显示错误。请为我们创建stackblitz，它将更加简单。虽然在我的代码中，表单在调用resetForm后没有清除。这是为什么？很难说没有看到它。控制台中有错误吗？找到了错误。我有另一张表格。当我删除它时，它会工作。我如何只访问第二个表单的formGroupDirective？给它一个标识符，例如
#myForm=“ngForm”
，然后使用
@ViewChild（'myForm'）formGroupDirective:formGroupDirective访问它取而代之
<form 
  ...
  #formDirective="ngForm" 
>

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}