フォームをフォームの後にリセットするテンプレートドフォームに送信するAngular2

Question

私はangular 2.4.0を使用しています。フォームの送信後に入力フィールドをクリアします。 試着SendRequest.reset()

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> 

component.ts私は、ボタンのクリックでgetRevision()を呼んでいる、すでに
SendRequest.resetForm(); SendRequest.form.reset(); を試みたが、 私に与えてください提案を働いていません、何がここで間違っている。

Answer 1

あなたのコンポーネントで作成しFormGroupにresetメソッドを使用してthisでそれを参照する必要があります。

this.SendRequest.reset(); 

Answer 2

あなたはsend messageボタン

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

のクリックイベントで（自分自身を形成する） SendRequestに合格しなければなりません

form.reset()を呼び出して、テンプレート駆動型をリセットします。 demoシンプル

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

。