Reset Form After Form Submit in Template driven Form Angular2

Question

I'm using angular 2.4.0 and I want to clear input fields after form submit. Tried 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>

I'm calling getRevision() on button click, tried
SendRequest.resetForm(); SendRequest.form.reset(); already but not working Please give me suggestions, what is wrong here.

Answer 1

you shall pass SendRequest(form itself) at click event of send message button

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

then call form.reset() to reset the template driven form.

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

simple demo.

Answer 2

You need to use reset method on the FormGroup created in your component and reference it with this:

this.SendRequest.reset();