Угловая форма 2 распространяется по компонентам

Question

Я пытаюсь создать компонент форм, в котором компонент предоставляет <form> и его потомкам содержимое формы, то есть управление. Я использую RC4 с реактивными формами. Компонент должен быть использован, как это:

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

Вот звенеть, показывающий реализацию: http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw?p=preview

Я бегу в исключение: TypeError: Не удается прочитать свойство «SetParent» нулевых

Есть способ достижения реактивной формы, распространяющейся по нескольким компонентам?

---

UPDATE: RC5 имеет четкое сообщение об ошибке и благодаря входу peeskillet, в formControlName может быть использован, если заказ директива получает FormGroup прилагается через formGroup собственности. Обновленный бухнуться показывает форму распространения через два компонента работы:

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

Answer 1

В вас Plunker, я не знаю, почему у вас есть ngForm

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

, но это не должно быть. Я думаю, что это может даже создать совершенно новую форму. Это нужно удалить. Как только вы удалите это, вы столкнетесь с другой проблемой, заявив, что нет ControlContainer. ControlContainer - FormGroupDirective ([formGroup]).

Проблема вызвана formControlName. Если вы посмотрите на источник для FormControlName directive и посмотрите на конструктор, вы увидите, что для него требуется зависимость ControlContainer. Но не только это, у него также есть @Host декоратор, то есть он будет искать только ControlContainer в инжекторе хозяина.

Честно говоря, я не совсем уверен, что в этом случае инжектор используется в качестве инжектора-хозяина, но, похоже, он не относится к директиве группы форм. Может быть, потому, что у вас есть компоненты.

Решение, которое я нашел вместо formControlName, вместо этого используйте [formControl] и просто передайте экземпляр FormControl. FormControlDirective не имеет этой проблемы (где ему нужен ControlContainer), поскольку его можно использовать в автономном режиме.

Таким образом, вы могли бы сделать это вместо того, чтобы

<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 
    }); 
    } 
} 

Это решает проблему. Вот обновленный Plunker,

Смотрите также:

• How to tackle creating complex form with lots of custom components? для некоторых дизайнерских идей.

---

_{1 - См Host and Visibility... для хорошего чтения по этой теме}