Angular 2 でフォームをリセットする

1. Angular 2 の resetForm() メソッド
2. Angular 2 の resetForm() メソッドを使用してフォームをリセットする手順

このチュートリアルでは、Angular 2 でフォームをリセットする方法を説明します。

ngForm ディレクティブは、フォームを作成および初期化し、そのフィールドの検証を設定する方法を提供します。ngForm の一般的な使用法の 1つは、ページ上のすべてのフォームコントロールの値を初期状態にリセットすることです。

HTML コードで ngForm ディレクティブへの参照を追加してから、そのリセットメソッドにアクセスする必要があります。

Angular 2 の resetForm() メソッド

resetForm() メソッドは、フォーム値をクリアして初期状態にリセットする組み込みの Angular 2 メソッドです。

resetForm() メソッドは、ブール値を引数として渡すことで呼び出すことができます。ブール引数が有効な場合、フォームのフィールドと値はクリアされます。

false の場合、プロパティが false に設定されているフィールドのみが削除されます。

Angular 2 の resetForm() メソッドを使用してフォームをリセットする手順

以下は、resestForm() メソッドを使用して Angular 2 でフォームをリセットする手順です。

フォームタイプをインポートするための構文：

import { ResestFormModule } from '@angular/forms';

フォームタイプをインスタンス化するための構文：

let myForm = new ResestForm();

このコンポーネントとその子コンポーネントで使用するコンポーネントにフォームを登録します。これにより、すべての子コンポーネントがこのフォームを認識し、使用できるようになります。

ユーザーがボタンをクリックしたり、フォームにデータを送信したりする場合など、フォームをリセットする場合は、コードでこのメソッドを呼び出します。

例（TypeScript）：

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent  {
    myForm: FormGroup;
    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            name: '2'
        })
    }
    resetForm() {
        this.myForm.reset();
    }
}

例（HTML）：

<form [formGroup]="myForm" novalidate>
<select formControlName="name">
    <option disabled hidden value="null">Please select</option>
    <option value="1">Pakistan</option>
    <option value="2">USA</option>
    <option value="3">Uk</option>
</select>
</form>
<button (click)="resetForm()">reset</button>

ここをクリックして、上記のコードのライブデモを確認してください。