在模板驱动表格Angular2中提交表单后重置表单

前端之家收集整理的这篇文章主要介绍了在模板驱动表格Angular2中提交表单后重置表单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用角度2.4.0,我希望在表单提交后清除输入字段.
尝试了SendRequest.reset(). @H_502_8@

@H_502_8@component.ts

@H_502_8@

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();
            }
        )

  }
@H_502_8@component.html

@H_502_8@

<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>
@H_502_8@我点击按钮点击getRevision(),试过
SendRequest.resetForm();
SendRequest.form.reset();
已经但没有工作
请给我一些建议,这里有什么不对.

解决方法

您需要在组件中创建的FormGroup上使用reset方法,并使用以下方法引用它: @H_502_8@

@H_502_8@

this.SendRequest.reset();

猜你在找的Angularjs相关文章