在模板驱动表格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

你应该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
}

简单的演示.

Answer 2

您需要在组件中创建的reset方法上使用方法并通过以下方式引用它：FormGroupthis

this.SendRequest.reset();