Angular2（Ionic2）：外側から内側のコンポーネントのフォームを処理する

Question

おはよう。ネストされたフォームがある場合、適切なスタイリングでフォームの検証を処理する方法を理解することに問題があります。 私が達成したいことは次のとおりです： 私はこのページに4つのタブがあるタブコンポーネントを表示しています。 各タブは別々の@Pageです。私が現在取り組んでいる1ページにはいくつかのコンポーネントのリストがあります（ItemListCmp）。個々のコンポーネント（ItemCmp）にはフォームがあります。このフォームは有効にする必要があります。無効な状態の場合は、のItemCmpのスタイリングで何かを行います。 ItemListCmpには、ItemCmpコンポーネントのこの束がラップされ、すべての内部フォームの合計ステータス（ItemCmp）が変更されたときにも何とか通知する必要があります。

この質問に関連する情報源を指摘してください。 は、私がItemListCmpとItemCmpためngForm/ngControl互換性のあるコンポーネントを作成します

Answer 1

@ViewChildrenデコレータを使用してこれを行いました。 簡単に言えば - AfterViewInitコンポーネントのライフサイクルコールバックで動的に私のItemListCmpに、私は、フォームを作成しています（ただし、「フォーム」htmlタグなし）

// somewhere at the class ItemListCmp 
@ViewChildren(ItemCmp) itemCmps: QueryList<ItemCmp>; 


ngAfterViewInit() { 
const iCmps = this.itemCmps.toArray(); 
iCmps.map((c: ItemCmp, key: number) => { 
    this.listForm.addControl(key.toString(), c.itemForm); 
}); 
this.listForm.statusChanges 
    .debounce(() => Observable.timer(800)) 
    .distinctUntilChanged() 
    .subscribe((status: string) => { 
    if (status === 'VALID') { 
    this.onStatusChanged.emit(1); 
    } else { 
    this.onStatusChanged.emit(0); 
    } 
}); 
} 

http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/は私のために

Answer 2

ありがとうございます。この方法で、validプロパティを使用してステータスを活用し、いくつかの検証を適用することもできます。それぞれのコンポーネントを、各レベルの含むフォーム内のコントロールとして追加することができます。

次の資料は、そのセクション「NgModel互換コンポーネント」でこれを実装する方法についていくつかのヒントを与える：

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

この質問はまた、あなたの詳細を与えることができる：

• Angular 2 custom form input