5

我有一个反应形式

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

我这样初始化它： 

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

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

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

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

我怎样才能解决这个问题？

4

4 回答 4

24

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

您需要调用resetFormFormGroupDirective 上的方法：

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

this.formGroupDirective.resetForm();

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

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

我已经在 StackBlitz 中对此进行了测试，这一切似乎都有效：

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

于 2018-07-01T16:30:34.450 回答
2

这行得通，试试这个，你需要重置formDirective否则它不会 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();
  }
}
于 2019-01-08T14:05:18.133 回答
0

如果您使用Angular Material输入，则可以通过将输入设置为 来隐藏错误状态untouched。仅当触摸输入时，材料输入字段才会显示错误状态。

所以

this.secondFormGroup.markAsUntouched();

应该做的伎俩。

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

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

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

于 2018-07-01T15:47:00.147 回答
0

您可以使用轻松清除validators表单clearValidators()

this.secondFormGroup .clearValidators();
this.secondFormGroup .updateValueAndValidity();

但这将从实际的表单组中删除验证器，并且它不会显示errors在下次提交的表单上。

更好的方法是：

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

public formSubmitted = false;

onSubmit(){
   this.formSubmitted = true;
}

reset(){
   this.formSubmitted = false;
}

模板文件

<div *ngIf="formSubmitted">
 display errors
</div>
于 2018-07-01T15:29:24.407 回答