Angular2 (Ionic2): Umgang mit den Formen in der inneren Komponente von der äußeren

Question

Guten Tag. Ich habe ein Problem damit, herauszufinden, wie man die Formvalidierung mit einem geeigneten Styling durchführt, wenn verschachtelte Formulare vorliegen. Die Sache, die ich erreichen möchte, ist die folgende: Ich habe eine Seite, auf dieser Seite zeige ich die Tabs-Komponenten mit vier Registerkarten darin. Jede Registerkarte ist die separate @ Page. Die eine Seite, an der ich gerade arbeite, hat eine Liste mit einigen Komponenten (ItemListCmp). Jede einzelne Komponente (nennen wir es ItemCmp) hat eine Form. Dieses Formular sollte validiert werden und im Falle eines ungültigen Zustands etwas mit dem Styling von ItemCmp tun. Die ItemListCmp hat auch eine Form, die diese Reihe von ItemCmp Komponenten umhüllt und sollte auch irgendwie benachrichtigt werden, wenn der Status der Summe aller inneren Formen (ItemCmp) ändert.

Könnten Sie mir dabei helfen oder eine Informationsquelle zu dieser Frage zeigen? Danke

Answer 1

Ich habe dies mit @ViewChildren Decorator getan. Um es einfach auszudrücken - in meinem ItemListCmp ich Sie das Formular (aber ohne die "Form" HTML-Tag) dynamisch in AfterViewInit Komponente Lifecycle Rückruf

// 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/ hilft mir sehr

Answer 2

Ich würde ngForm/ngControl kompatible Komponenten für ItemListCmp und ItemCmp erstellen. Auf diese Weise können Sie ihren Status über die Eigenschaft valid nutzen und auch eine Validierung anwenden. Sie können jede Komponente als Steuerelement innerhalb des enthaltenen Formulars auf jeder Ebene hinzufügen.

Der folgende Artikel wird einige Hinweise darüber geben, wie dies in seinem Abschnitt "NgModel-kompatible Komponente" zu implementieren: Sie

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

Diese Frage auch weitere Details geben könnte:

• Angular 2 custom form input