コンポーネントを含むAngularフォームを作成する最も良い方法は何ですか？

Question

私は非常に長いフォームを構築しています。問題のフォームには3つのメインセクションがあり、メンテナンス上の理由から3つのコンポーネントを使用してテンプレートをクリーンアップしたいと思います。

コンポーネントの入力を更新すると、これらのコンポーネントを含むフォームモデルは更新されないため、Angularの「ネイティブ」フォームバリデータを使用して検証されません。

サービスを使用してこれらのコンポーネントのデータを親フォームに「共有」することを考えましたが、それは私にバリデータを与えません。

私はコンポーネントのバインディングを使ってフォームのモデルを渡すことができると思っていましたが、あまりにも多くの作業や汚れているように思えます。

これを実行するベストプラクティスは何ですか？

擬似コードの例：

<form> 
    <component-1/> <!-- how do I get data out of there, and into the form model --> 
    <component-2/> <!-- how do I validate the inputs inside the components using angular --> 
    <component-3/> 
    <button type="submit">Submit</button> 
</form> 

Answer 1

[OK]をクリックします。私はこれを少し実験し、これを見つけました。

親フォーム：

<form name="form" ng-submit="$ctrl.submit(form)> 
    <component-1></component-1> 
</form> 

コンポーネント-1フォーム要素：

<fieldset ng-form="child-form"> 
    <input 
     type="text" 
     name="first-name" 
     id="first-name" 
     ng-model="$ctrl.sharedService.formData.name"> 
</fieldset> 

子コンポーネントから親のコンポーネントに「同期」への「ネイティブ」な方法のモデルはありませんあなたの場合を除き=バインディングを使用してください（ステートレスにする必要があるか、またはAngular 2コンポーネントを模倣する必要があるため、コンポーネントにとって明らかに悪い方法です）。

親フォームを送信すると、Angularは子フォームを含むフォームオブジェクトを提供します（プロパティはコンポーネントのng-formの名前になります）。

これはあなたが... $valid、$error、などのために最後に

を確認することができますので、保存、またはコンポーネント入力値を同期、我々が使用できる共有サービスオブジェクト上のフォームの入力値を保存することができますバックエンドに値を保存するために$http呼び出しを構成します。