CODEWITHSUNDEEP
validationangular2-forms
Hardik Gondalia
Hardik Gondalia

Reputation: 3717

How to Reset Validation after form submit in Angular 2

I've test form with some simple validation. My validation is working perfectly on time of submit form.

HTML 

<section>
    <form (ngSubmit)="savePerson()" #personForm="ngForm">
      <div>
        <label for="name">Name: </label>
        <input type="text" name="name" [(ngModel)]="person.name" required #name="ngModel" >
        <div [hidden]="name.valid || name.pristine" class="error">
          Name is required.
        </div>
      </div>
      <div>
        <label for="weight">Weight: </label>
        <input type="number" name="weight" [(ngModel)]="person.weight" min="20" #weight="ngModel">
      </div>
      <div *ngIf="weight.errors && (weight.dirty || weight.touched)" class="error">
        <p [hidden]="!weight.errors.min">
          Weight must be higher than a feather's. {{weight.value}} is way too low.
        </p>
        <p [hidden]="!weight.errors.max">
            Weight can't be higher than a Rancor's. {{weight.value}} is too high
        </p>
      </div>
      <div>
        <label for="height">Height: </label>
        <input type="number" name="height" [(ngModel)]="person.height">
      </div>
      <div>
        <label for="profession">Profession: </label>
        <select name="proffesion" [(ngModel)]="person.proffesion" #proffesion="ngModel" min=1>
          <option [ngValue]="0">Select Proffession</option>
          <option *ngFor="let p of allproffesion" [value]="p.id">{{p.title}}</option>
        </select>
        </div>
      <div>
        <p>{{message}}</p>
       <button type="submit" [disabled]="!personForm.form.valid">Save</button>
        </div>
    </form>
</section>
<button (click)="gotoPeoplesList()">Back to peoples list</button>

TS

export class AddPersonComponent { 
    person : Person = { id : 0, height : 0, weight : 0, name : "", proffesion : 0};
    message : String = "";
    allproffesion : Proffesion [];
    constructor(private route: ActivatedRoute, private router: Router, private peopleService:PeopleService){
        this.getAllProffession();
    }

    getAllProffession(){
        this.peopleService.getAllProffession().subscribe(i=>this.allproffesion = i);
    }
    gotoPeoplesList(){
      let link = ['/'];    
      this.router.navigate(link);
    }

    savePerson(){
        this.peopleService.addPerson(this.person).subscribe(i=>{ this.reset(i)});
    }

    reset(person1 : Person){
        if(person1.id != 0){
            console.log(this.person);
            this.message = "Person Added Successfully.!";
            this.person = { id : 0, height : 0, weight : 0, name : "", proffesion : 0};
        }
        else{
            this.message = "Something Went Wrong";
        }
    }

enter image description here After Submitting Form: enter image description here

My issue is after submitting the form, I want to reset validation. I don't want to reset form although. As I want to show message for successful insert.

Upvotes: 3

Views: 5604

Answers (2)

Garth Mason
Garth Mason

Reputation: 8001

You can use the FormGroup reset operation if you want to clear the touched and dirty flags of the form controls. Internally this will mark all descendants as pristine and untouched.

The reset method also takes a map of the values for the form state so you can keep all (or some of the values from the previous form submission). See this example

Also from your question:

As I want to show message for successful insert

The form reset would not affect you displaying this as the message property is not part of the form - it's just a regular property on your component.

Upvotes: 2

Mohamed Gara
Mohamed Gara

Reputation: 2935

In the savePerson method, you should invoke the FormGroup markAsPristine method.

This the official documentation of this method: https://angular.io/api/forms/AbstractControl#markAsPristine

To get access to the FormGroup object in the component class, you can use @ViewChild.

Upvotes: 0

Related Questions