在模板驱动的表单角度2中提交表单后重置表单

Question

我正在使用angular 2.4.0，我想在提交表单后清除输入字段。 试过SendRequest.reset().

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

组件.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

您应该在单击按钮send message事件时传递SendRequest(表单本身(

<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

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

this.SendRequest.reset();