Réinitialiser le formulaire après l'envoi du formulaire dans le formulaire basé sur le modèle Angular2

Question

J'utilise angular 2.4.0 et je souhaite effacer les champs de saisie après l'envoi du formulaire. Essayé SendRequest.reset().

component.ts

getRevision(SendRequest: NgForm){ 
    this.submitted = true; 
    let headers = new Headers({ 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }); 
    let params = { 
     "Firstname":this.name, 
     "Lastname":"", 
     "Email":this.email, 
     "Phonecode":"91", 
     "Phone":this.phone, 
     "Message":this.message,  
     } 
    return this.http.post(this.url,params) 
    .map(res => res.json()) 
    .catch(this.errorHandler) 
    .subscribe(
      data => { 
       this.revisions = data.resultData; 
       this.resultCode = data.resultCode; 
       this.responeseMsg = data.message.MessageText;     
      }, 
      err => { 
       console.log(err); 
      }, 
      () =>{ 
      SendRequest.resetForm(); 
      SendRequest.form.reset(); 
      } 
     ) 

    } 

component.html

<form #SendRequest="ngForm" [formGroup]="SendRequest" > 
    <div class="col-md-6"> 
    <div class="form-group"> 
    <input type="text" name="name" [(ngModel)]="name" class="form-control" placeholder="Your Name" required #fullname="ngModel"> 
    <div *ngIf="fullname.errors && (fullname.dirty || fullname.touched)" 
    class="contact-validate"> 
    <div [hidden]="!fullname.errors.required"> 
     Name is required 
    </div>          
    </div> 
</div> 
<div class="form-group"> 
    <input type="email" name="email" class="form-control" [(ngModel)]="email" required #emailid="ngModel" placeholder="Your Email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"> 
    <div *ngIf="emailid.errors && (emailid.dirty || emailid.touched)" 
    class="contact-validate"> 
    <div [hidden]="!emailid.errors.required"> 
    Email is required 
    </div> 
    <div [hidden]="!emailid.errors.pattern"> 
    Please enter valid email format 
    </div>          
</div> 
</div> 
<div class="form-group"> 
<input type="text" name="phone" class="form-control" [(ngModel)]="phone" placeholder="Your Phone" required pattern="[0-9]+" #phoneno="ngModel"> 
<div *ngIf="phoneno.errors && (phoneno.dirty || phoneno.touched)" 
class="contact-validate"> 
<div [hidden]="!phoneno.errors.required"> 
    Phone is required 
</div>  
<div [hidden]="!phoneno.errors.pattern"> 
    Phone must be number 
</div>               
</div> 
</div> 
</div> 
<div class="col-md-6"> 
    <div class="form-group"> 
    <textarea class="form-control" name="message" [(ngModel)]="message" #msg="ngModel" required placeholder="Your Message" rows="7"></textarea> 
    <div *ngIf="msg.errors && (msg.dirty || msg.touched)" 
    class="contact-validate"> 
    <div [hidden]="!msg.errors.required"> 
    Message is required 
    </div>          
</div> 
</div> 
</div> 
<div class="send-msg-btn"> 
    <button type="button" [disabled]="!SendRequest.form.valid" (click)="getRevision()" class="btn btn-primary"><i class="fa fa-send"></i>send message</button>  
</div> 
</form> 

J'appelle getRevision() sur le bouton, cliquez essayé
SendRequest.resetForm(); SendRequest.form.reset(); déjà, mais ne fonctionne pas S'il vous plaît me donner des suggestions, qu'est-ce qui ne va pas ici?

Answer 1

Vous devez utiliser la méthode reset sur le FormGroup créé dans votre composant et référence avec this:

this.SendRequest.reset(); 

Answer 2

vous passerez SendRequest (formulaire lui-même) à l'événement de clic de send message bouton

<button type="button" [disabled]="!SendRequest.form.valid" (click)="getRevision(SendRequest)" class="btn btn-primary"><i class="fa fa-send"></i>send message</button> 

puis appelez le form.reset() pour réinitialiser le formulaire piloté par le modèle.

getRevision(SendRequest: NgForm){ 
    ... 
    SendRequest.reset();  // <-------reset form here 
} 

simples demo.