Comment réinitialiser la validation après l'envoi d'un formulaire dans Angular 2

Question

J'ai un formulaire de test avec une simple validation. Ma validation fonctionne parfaitement à l'heure de la soumission.

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"; 
     } 
    } 

Après formulaire Envoi:

Mon problème est après avoir soumis le formulaire, Je veux réinitialiser la validation. Je ne veux pas réinitialiser le formulaire bien que. Comme je veux montrer le message pour l'insertion réussie.

Answer 1

Vous pouvez utiliser l'opération FormGroupreset si vous voulez effacer les drapeaux touched et dirty des contrôles de formulaire. En interne, tous les descendants seront marqués pristine et untouched.

La méthode de réinitialisation prend également une carte des valeurs de l'état du formulaire afin que vous puissiez conserver toutes (ou certaines des valeurs de la soumission de formulaire précédente). Voir this example

également de votre question:

Comme je veux montrer un message pour l'insertion réussie

La remise à zéro du formulaire ne serait pas vous affecter l'affichage de ce que la propriété message ne fait pas partie de la forme - c'est juste une propriété régulière sur votre composant.

Answer 2

Dans la méthode savePerson, vous devez appeler la méthode FormGroup markAsPristine.

Cette la documentation officielle de cette méthode: https://angular.io/api/forms/AbstractControl#markAsPristine

Pour avoir accès à l'objet FormGroup dans la classe de composants, vous pouvez utiliser @ViewChild.