テンプレート駆動型フォームとリアクティブフォームの違いは何ですか？

Question

Accepted Answer

Angularは**2つのアプローチ**をフォームに提供します。**テンプレート駆動型**フォームはシンプルであり、HTMLで定義されます。**リアクティブ**フォームはTypeScriptで定義され、より多くの制御を提供します — 複雑で動的、またはバリデーションが多いフォームに適しています。 ## なぜ重要なのか ```ts // just import FormsModule; minimal TS ``` ```html ``` フォームの構造とバリデーションは`ngModel`ディレクティブを使用して**テンプレート**に存在します。セットアップが簡単ですが、フォームモデルは暗黙的でテスト/プログラムによる操作が困難です。 ## リアクティブ — フォームモデルがTypeScriptにある ```ts import { FormBuilder, Validators } from "@angular/forms"; export class SignupComponent { constructor(private fb: FormBuilder) {} form = this.fb.group({ email: ["", [Validators.required, Validators.email]], password: ["", [Validators.required, Validators.minLength(8)]], }); onSubmit() { if (this.form.valid) console.log(this.form.value); } } ``` ```html ``` フォームはTS内に構築する**明示的なオブジェクト**（`FormGroup`/`FormControl`）です。これにより、監視可能でテスト可能であり、操作しやすくなります（フィールドの追加/削除、`valueChanges`経由での変更への反応）。 ## 比較 ```text Template-driven Reactive Where defined HTML (ngModel) TypeScript (FormBuilder) Form model implicit/async explicit, synchronous object Validation directives in template validators in code Dynamic forms hard easy (add/remove controls in code) Testability harder straightforward (it's just an object) Best for simple forms complex/dynamic/validated forms ``` ## リアクティブフォームがストリームを公開する ```ts this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes this.form.valid; // synchronous validity check ``` 正しいフォームアプローチを選択することはメンテナンス性に重要です：**テンプレート駆動型**は簡単なフォームに；**リアクティブ**は複雑なもの — マルチステップウィザード、動的フィールドセット、クロスフィールドバリデーション、またはユニットテストが必要なフォーム向けです。リアクティブフォームの明示的で監視可能なモデルは、一般的に深刻なアプリケーションで推奨されます。より強力でテスト可能、スケーラブルであるためです。初期コードは多く必要ですが。