重置表单的最简洁方法

在 Angular 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);
}

添加对的引用ngForm https://angular.io/api/forms/NgFormhtml 代码中的指令，这使您可以访问表单，因此您可以使用.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();
}

和...之间的不同resetForm https://angular.io/api/forms/NgForm#resetform and reset https://angular.io/api/forms/AbstractControlDirective#reset前者将清除表单字段以及任何验证，而后者只会清除字段。使用重置表格表单验证并提交后，否则使用reset.

为无法使上述工作发挥作用的人添加另一个示例.

按下按钮：

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

上面同样适用，您也可以选择将表格传递给newHero功能。