How to reset form validation on submission of the

问题:

I have to reset my form along with validation. is there any method to reset the state of form from ng-dirty to ng-pristine.

回答1:

There doesn't seem to be support for that yet. A workaround I have seen is to recreate the form after submit which is obviously cumbersome and ugly.

See also

• 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

回答2:

Here's how it currently works with 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();
    }
}

回答3:

from.resetForm()

I've tried pretty much everything, and the only thing I found that actually resets form.submitted to false is the following:

In your template, send your form into the submit function:

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

In your component.ts file, have the following:

// 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);


}

The console.log values output the following - notice it resets all values.

VALID true false false true true false false

INVALID false true true false false true true

回答4:

I'm doing this in RC.5, I define my form elements in a template.

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

Passing the form to submit or watching it with ViewChild didn't work at all, this is good enough for me at the moment.

回答5:

In more current versions (Angular 2.4.8 in my case) it's easy:

Marks a control as prestine and therefore valid again.

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

回答6:

Building up from Benny Bottema's answer, I was able to reset the form including validations using resetForm() in Angular 6.

class YourComponent {

   @ViewChild("yourForm")
   yourForm: NgForm;

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

回答7:

if you use model-driven forms i.e ngFormModel, Defining the controlGroup once again after submitting will solve this.Refer this link

回答8:

I've recently considered this as there is currently (May 2016) nothing architected into Angular2 for this as yet.

Considering the user cannot enter 'undefined' or 'null' and the validation is mainly used to display form errors to the user then just reset the control values to Null

myControl.updateValue(null);

You will need to add this condition when deciding to display the control errors in your UI simply by adding

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

(this check because Validators.Required treats blank content as valid)

Hope this helps.

回答9:

This worked for me in Angular 5

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

This resets both form values and validations.