Angular Reactive Form 提交和清除验证 [英] Angular Reactive Form submit and clear validation

问题描述

我有一个反应式

 
<ng-template matStepLabel>输入项目</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>

</表单>

我是这样初始化的:

 this.secondFormGroup = this._formBuilder.group({类别:[''，Validators.required]，子类别:[''，Validators.required]，名称:['', Validators.required],金额:[''，Validators.required]，价格:[''，Validators.required]});

单击 sumbit 后，我​​调用此方法:

AddNewProduct(newProduct) {如果(this.secondFormGroup.valid){//添加产品this.secondFormGroup.reset();}}

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

我该如何解决这个问题?

解决方案

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

您需要调用 resetForm 代替，它位于 FormGroupDirective 上:

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;this.formGroupDirective.resetForm();

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

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

我已经在 StackBlitz 中对此进行了测试，似乎一切正常:

https://stackblitz.com/edit/angular-l6xq1d?file=src%2Fapp%2Fapp.component.ts

I have a reactive form

 <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>

I initialize it like this:

 this.secondFormGroup = this._formBuilder.group({
  category: ['', Validators.required],
  subCategory: ['', Validators.required],
  name: ['', Validators.required],
  amount: ['', Validators.required],
  price: ['', Validators.required]
});

Upon clicking sumbit I call this method:

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

After adding the product, I clear the form. However, once the form is cleared, it triggers the validation errors. I want the validation errors to show only when the user clicks submit and the form isn't valid, not when I clear the form after submitting.

How can I fix this?

解决方案

The issue seems to be that the form is marked as submitted after reset is called. If the form is marked as submitted, regardless of whether or not its pristine, the errors will be highlighted.

You'll need to call resetForm instead, which is on the FormGroupDirective:

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

this.formGroupDirective.resetForm();

Secondly, you'll need to wrap it in a setTimeout with a timeout of 0, so that the form is submitted before it resets.

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

I've tested this in a StackBlitz, and it all seems to work:

https://stackblitz.com/edit/angular-l6xq1d?file=src%2Fapp%2Fapp.component.ts

这篇关于Angular Reactive Form 提交和清除验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！