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

发布时间：2020-12-17 17:43:13 所属栏目：安全来源：网络整理

导读：我正在使用角度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 pa

我正在使用角度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();
已经但没有工作
请给我一些建议,这里有什么不对.

解决方法

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

this.SendRequest.reset();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!