Kątowa 2 forma rozłożona na komponentach

Question

Próbuję utworzyć komponent formularza, w którym komponent dostarcza <form> i jego potomków treść formularza, tj. Formant. Używam RC4 z formami reaktywnymi. Komponent powinien być stosowany tak:

<my-formwizard [form]="form"> 
    <input formControlName="name" type="text" /> 
</my-formwizard> 

Oto upadać pokazujący realizację: http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw?p=preview

ja napotkasz wyjątek: TypeError: nie można odczytać właściwość „setParent” null

Czy istnieje sposób na uzyskanie reaktywnej formy rozłożonej na wiele komponentów?

---

UPDATE: RC5 ma jaśniejszy komunikat o błędzie, a dzięki wejściu peeskillet, w formControlName mogą być stosowane, jeżeli dyrektywa zwyczaj dostaje FormGroup przymocowany za pośrednictwem właściwości formGroup. Zaktualizowana upadać pokazuje formę Spread w dwóch komponentów robocza:

http://plnkr.co/edit/1VfIH5AYjoe7dmizw6ss?p=preview

Answer 1

w was Plunker, nie jestem pewien, dlaczego masz ngForm

<my-formwizard [form]="form" ngForm="form"> 

ale to nie powinno tam być. Myślę, że może to być nawet tworzenie zupełnie nowej formy. To powinno zostać usunięte. Gdy to usuniesz, natkniesz się na inny problem, mówiąc, że nie ma ControlContainer. Numer ControlContainer to FormGroupDirective (().

Problem jest spowodowany przez formControlName. Jeśli spojrzysz na źródło dla FormControlName directive i spojrzysz na konstruktora, zobaczysz, że wymaga ono zależności od ControlContainer. Ale nie tylko to, ale ma także dekorator, co oznacza, że ​​będzie szukał tylko ControlContainer w iniektorze hosta.

Szczerze mówiąc, nie jestem do końca pewny w tym przypadku, który wtryskiwacz jest używany w tym przypadku jako wtryskiwacz hosta, ale wygląda na to, że nie jest on zgodny z dyrektywą grupy formularzy. Może dlatego, że masz skonfigurowane komponenty.

Rozwiązanie, które znalazłem zamiast używać formControlName, zamiast tego należy użyć [formControl] i po prostu przekazać instancję FormControl. Model FormControlDirective nie ma tego problemu (jeśli potrzebuje ControlContainer), ponieważ można go używać w trybie autonomicznym.

Więc można zrobić to zamiast

<input [formControl]="nameCtrl" type="text" /> 

export class App { 

    form: FormGroup; 
    nameCtrl: FormControl; 

    constructor(fb: FormBuilder) { 
    this.nameCtrl = new FormControl(''); 
    this.form = fb.group({ 
     name: this.nameCtrl 
    }); 
    } 
} 

To rozwiązuje problem. Oto aktualizowane Plunker,

Zobacz także:

• How to tackle creating complex form with lots of custom components? dla niektórych pomysłów.

---

_{1 - Zobacz Host and Visibility... dobrego przeczytać na ten temat}