Angular 重置表单的最简洁方法

发布于05月16日

在角2最新版本中重置表单的最干净方式是什么？我想在添加帖子后重置输入文本框.

@Component({
  selector: 'post-div',
  template: `
            <h2>Posts</h2>
            <form (submit)="addPost()">
                <label>Title: </label><input type="text" name="title" [(ngModel)]="title"><br/>
                <label>Body: </label><input type="text" name="body" [(ngModel)]="body"><br/>
                <input type="submit" value="Add Post">
            </form>
            <ul>
                <li *ngFor="let post of posts">
                    <strong>{{post.title}}</strong>
                    <p>{{post.body}}</p>
                </li>
            </ul>
          `,
  providers: [PostService]
});

addPost(){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this._postService.addPost(this.newPost);
}

推荐答案

在html代码中添加对ngForm指令的引用，这样就可以访问表单，因此可以使用.resetForm().

<form #myForm="ngForm" (ngSubmit)="addPost(); myForm.resetForm()"> ... </form>

.或将表单传递给函数:

<form #myForm="ngForm" (ngSubmit)="addPost(myForm)"> ... </form>

addPost(form: NgForm){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this._postService.addPost(this.newPost);
    form.resetForm(); // or form.reset();
}

The difference between 100 and 101 is that the former will clear the form fields as well as any validation, while the later will only clear the fields. Use 102 after the form is validated and submitted, otherwise use 103.

Adding another example for people who can't get the above to work

按下按钮:

<form #heroForm="ngForm">
    ...
    <button type="button" class="btn btn-default" (click)="newHero(); heroForm.resetForm()">New Hero</button>
</form>

同样的道理也适用于上面，您也可以 Select 将表单传递给newHero函数.