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

Question

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

Answer 1

以下是它目前如何与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 2

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 3

应用程序组件.html

将#formDirective="ngForm"和 传递formDirective给onSubmit方法对于重置错误样式（例如mat-error. 检查#4190以了解此错误并深入解释为什么需要它以及它在幕后如何工作。

<form [formGroup]="contactForm" (ngSubmit)="onSubmit(contactForm.value, formDirective)" #formDirective="ngForm"> 
  <!-- Your input elements... -->
  <button [disabled]="!contactForm.valid">Submit</button>
</form>

app.component.ts

记住FormGroupDirective您需要从@angular/forms（Angular/Material 9）导入的。要使表格为空调用this.contactForm.reset();，表格将为invalid，这很好。但是，您还需要重置不需要的验证器样式，这是一种不同的方法，即formDirective.resetForm();.

预告出现差异formDirective和formData其不同的内置方法。

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

public contactForm: FormGroup = this.formBuilder.group({
  // Your input elements...
});

public onSubmit(
  formData: FormGroup,
  formDirective: FormGroupDirective
): void {
  this.contactForm.reset(); // Reset form data
  formDirective.resetForm(); // Reset the ugly validators
}

Answer 4

在最新版本中（我的例子是 Angular 2.4.8），这很简单：

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

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

Answer 5

似乎还没有对此的支持。我见过的一种解决方法是在提交后重新创建表单，这显然既麻烦又难看。

也可以看看

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

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

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

通过表单提交或观看它ViewChild根本不起作用,这对我来说已经足够了.

Answer 7

我在这里感谢大家的回答。他们为我指明了正确的方向。

Angular 6 with Angular Material

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

<form #formDirective="ngForm" (ngSubmit)="submitForm(formDirective)">

在你的组件类中，调用 formDirective.resetForm()：

private submitForm(formDirective): void {
    formDirective.resetForm();
    this.myForm.reset();
}