Angular2モデル駆動型フォーム

Question

私はAngular2を使用しています。フォームのバリデーションをしたい。 は、現在、私のテンプレートは次のようになります。

<form #f="ngForm" novalidate (ngSubmit)="save()"> 
     <input type="checkbox" name="showHydroSystemSelection" [(ngModel)]="cosResponse.showHydroSystemSelection.value" (ngModelChange)="onChange(cosResponse.showHydroSystemSelection.shouldRefresh)"/> 
     <label>System Selection</label> 
     <select name="systemSelection" id="systemSelection" [(ngModel)]="cosResponse.systemSelection.selected" (ngModelChange)="onChange(cosResponse.systemSelection.shouldRefresh)"> 
      <option *ngFor="let option of cosResponse.systemSelection.value" value="{{option.id}}" > 
      {{option.name}} 
      </option> 
     </select> 

</form> 

angular2検証を行う方法について多くのブログでは、彼らは、フォーム上のformGroupを使用することを言います。 "フォームのコントロールを親formGroupディレクティブに登録するためにngModelを使用することはできません。"

ngModelを使用する構文は非常にわかりやすいです優れたダイナミックなアプリケーションのために、メタデータに依存してさまざまな要素をレンダリングしています。モデルとしてのformGroupは、私たちのニーズに対してあまりにも明白で静的です。私はモデルを使用して、これらの2つの方法が何であるかを理解していない、とどのように効果的と同じように簡単ngModel

Answer 1

としてあなたは正しい@vanvalあるformGroupを使用するように！

私はそれがコード、戦略とユーザー体験についての議論をit'sと思います。

要約すると、我々はより良​​いでは結果という、私たちにより多くの制御を与えるために（モデル駆動型アプローチに）反応に、それをを動作するようにがより簡単ですテンプレート駆動型のアプローチを変更しますHTMLの間のデカップリングを活用することにより、検証可能な形（デザイン/ CSSチームがここで働くことができます）と、コンポーネントのビジネスルール（角度/ JSの専門家メンバー）とには、相関関係の検証を無効の変換などの機能を持つユーザー体験を向上させ、は複雑なシナリオを扱いますランタイム検証ルールと動的フィールドとしての 。

この記事は参考になりました： Angular 2 Forms - Template Driven and Model Driven Approaches