在模板驅動的表單提交表單後重置表單Angular2

Question

我使用的是angular 2.4.0，我想在表單提交後清除輸入字段。 試過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> 

，我號召按鈕點擊getRevision()，試圖
SendRequest.resetForm(); SendRequest.form.reset(); 已經而非工作 請給我建議，這裏有什麼問題。

Answer 1

您需要使用在你的組件創建的FormGroupreset方法和引用它與this：

this.SendRequest.reset(); 

Answer 2

您應在單擊事件傳遞SendRequest（形成本身）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> 

然後致電form.reset()重置模板驅動表單。

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

簡單demo。