フォームをリセットする最もクリーンな方法

質問

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 ディレクティブを追加すると、フォームにアクセスできるようになります。 .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 そして reset は、前者がバリデーションと同様にフォームフィールドをクリアするのに対し、後者はフィールドのみをクリアします。使用方法 リセットフォーム を使い、そうでない場合は リセット .

上記がうまくいかない人のために別の例を追加する .

ボタン押しで。

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

上記と同様に、フォームを newHero 関数に渡すこともできます。