26

2つの違いは何ですか:

<form #form="ngForm">

と

<form [ngFormModel]="form">

いつどちらを使用しますか？

4

2 に答える 2

31

最初の戦略は「テンプレート駆動型」フォームです。Angular は暗黙的なディレクティブをフォームに追加し、バリデーターをほとんど宣言的にテンプレートに追加するため、「テンプレート駆動型」という名前が付けられます。たとえば、フィールドが必須であることを示すバリデータを追加する方法は次のとおりです。

<form #form="ngForm">
    <input name="firstName" required [(ngModel)]="formModel">
</form>

ここでは、required 属性を使用しており、Angular は暗黙的なディレクティブを介して必要な Validator を構成しています。このタイプのフォームは ng-model での使用に非常に適しており、Angular 1 フォームを Angular 2 に移行するのに理想的です。

2 番目の戦略は、「モデル駆動型」のフォームです。ここでは、テンプレートでバリデーターを宣言せず、代わりにコントロール名を宣言します。

<form [formGroup]="form">
    <input name="firstName" formControlName="firstName">
</form>

次に、すべての検証ロジックは、テンプレートではなくコードを介して宣言されます。また、フォームを Observable としてサブスクライブし、関数型リアクティブ プログラミング手法を使用することもできます。例えば：

@Component({
    selector: "some-component",
    templateUrl: 'model-driven-form.html'
})
export class ModelDrivenForm {
    form: FormGroup;
    firstName = new FormControl ("", Validators.required);
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            "firstName":["", Validators.required]
        });
        this.form.valueChanges
        .subscribe((formValue) => {
            console.log(formValue);
        });
    }
}

これも動作しNgModelますが、フォーム コントロールを介してフォームの値を既に取得できるため、これは必要ありません。

したがって、両方のどちらを選択するかは、ユースケースに大きく依存します。

  • 既存のフォームを移行する場合は、NgModel + オプション 1 を検討してください
  • 新しいフォームを作成し、関数型リアクティブ プログラミング手法を試したい場合は、formGroupオプション 2を検討してください。
  • 前に述べたように、NgModel はオプション 2 でも機能します。そのため、コードを介してバリデーターの定義を組み合わせ、NgModel を介してフォーム値を取得できます。を使って関数型リアクティブ プログラミング テクニックを強制的に使用する必要はありませんが、ぜひformGroup試してみてください。非常に強力です。

PS Angular2 の新しいフォームの詳細については、こちらを参照してください。

于 2016-01-29T20:00:45.603 に答える