如何在ANGULAR 2中提交表单时重置表单验证

Question

我必须重置我的表单以及验证。是否有任何方法可以将表单状态从ng-dirty重置为ng-pristine。

Answer 1

似乎还没有支持。我看到的一种解决方法是在提交后重新创建表单，这显然是繁琐和丑陋的。

也可以看看

• https://github.com/angular/angular/issues/6196
• https://github.com/angular/angular/issues/4933
• https://github.com/angular/angular/issues/5568
• https://github.com/angular/angular/issues/4914

Answer 2

我很感激每个人的答案。他们指出了我正确的方向。

带有角度材料的角度6

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

然后

@ViewChild('myForm') myForm: NgForm;
formGroup = new FormGroup({...});
submit() {
  if (this.formGroup.pristine ||
  this.formGroup.untouched ||
  !this.formGroup.valid
) {
    return;
  }

  .... do with form data

  this.formGroup.reset();
  this.myForm.resetForm();
}

Answer 3

以下是它目前如何与Angular 4.1.0 - 5.1.3一起使用：

class YourComponent {
    @ViewChild("yourForm")
    yourForm: NgForm;


    onSubmit(): void {
        doYourThing();

        // yourForm.reset(), yourForm.resetForm() don't work, but this does:
        this.yourForm.form.markAsPristine();
        this.yourForm.form.markAsUntouched();
        this.yourForm.form.updateValueAndValidity();
    }
}

Answer 4

from.resetForm（）

我已经尝试了很多东西，我发现实际上将form.submitted重置为false的唯一内容如下：

在模板中，将表单发送到提交函数：

<form name="form" class="form-horizontal" (ngSubmit)="f.form.valid && submit(f)" #f="ngForm" novalidate>

在component.ts文件中，具有以下内容：

// import NgForm
import { NgForm } from '@angular/forms';

// get the passed in variable from the html file
submit(myForm: NgForm): void {

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);

    // This is the key!
    myForm.resetForm();

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);


}

console.log值输出以下内容 - 请注意它将重置所有值。

VALID true false false true true false false

INVALID false true true true false false true

Answer 5

我在RC.5中这样做，我在模板中定义我的表单元素。

<form (ngSubmit)="submit(); form.reset()" #form="ngForm">

通过表格提交或用ViewChild观看它根本不起作用，这对我来说已经足够好了。

Answer 6

在更新的版本中（在我的情况下是Angular 2.4.8），它很简单：

将控件标记为prestine，因此再次有效。

private resetFormControlValidation(control: AbstractControl) {
    control.markAsPristine();
    control.markAsUntouched();
    control.updateValueAndValidity();
}

Answer 7

从Benny Bottema's answer建立，我能够使用Angular 6中的resetForm（）重置包含验证的表单。

class YourComponent {

   @ViewChild("yourForm")
   yourForm: NgForm;

    onSubmit(): void {
     doYourThing();
     this.yourForm.resetForm();
    }
}

Answer 8

这对我来说在Angular 5中使用模板驱动的表单（它不适用于被动表单）

<form #myForm = "ngForm" (submit)="callMyAPI(); myForm.resetForm()">

这会重置表单值和验证。

Answer 9

如果您使用模型驱动的表单，即ngFormModel，提交后再次定义controlGroup将解决此问题。请参阅此link

Answer 10

我最近认为这是因为目前（2016年5月）尚未构建到Angular2中。

考虑到用户无法输入'undefined'或'null'，验证主要用于向用户显示表单错误，然后将控件值重置为Null

myControl.updateValue(null);

在决定仅通过添加在UI中显示控制错误时，您将需要添加此条件

if (myControl.value !== undefined && myControl.value !== null) {
   //then there is reason to display an error
}

（此检查是因为Validators.Required将空白内容视为有效）

希望这可以帮助。