角度2表單遍佈組件

Question

我想創建一個表單組件，其中組件提供<form>及其後代的表單內容，即控件。我正在使用反應形式的RC4。該組件應該使用這樣的：

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

這裏是展示實施普拉克：http://plnkr.co/edit/OSzjDQD63lwoEsyqdLvw?p=preview

我碰到一個例外：類型錯誤：無法讀取空的特性「的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依賴項。但不僅如此，它還有一個裝飾器，這意味着它只會在主機注入器中查找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...在這個題目}