Question

有没有办法让form.reset（）也重新将值form.submitted重置为false？这在我的情况下很烦人，因为我使用form.submitted作为条件来显示模板中的验证错误。这意味着在清除（重置）表单后会显示验证错误。

模板：

<form ... #f="ngForm" (ngSubmit)="f.form.valid && submitProduct(f)>
  <input type="text" name="productName" [(ngModel)]="product.name" #productName="ngModel" required>
  <div *ngIf="f.submitted && !productName.valid">Product name is required</div>
  <button type="submit" value="true" >Submit Request</button>
</form>

成分：

submitProduct(form: NgForm) {
    this.productService.createProduct(this.product).subscribe(data => {
        form.reset();
        // HERE annoyingly validation errors show up on empty form.
      }
    );
}

Answer 1

自己找到答案。使用

form.resetForm();

代替。这设置为false和pristine为true。

Answer 2

使用原生重置按钮类型：

<button type="reset">Reset</button>

Answer 3

您无需在提交中拥有f.form.valid && submitProduct。

<form ... #f="ngForm" (ngSubmit)="submitProduct(f)>
...
<button type="submit" value="true" [disabled]="!f.valid">Submit Request</button>

同时致电resetForm使其恢复原状。

form.resetForm();

Angular 2表单reset（）不重置_submitted或submit的值

3 个答案: