Angular 2創建嵌套組件的反應形式

我的需求是我需要創建一個嵌套組件的表單。我正在爲每個表單字段創建組件，對於文本框會有是一個組件，對於單選按鈕，會有另外一個組件，比如wise。
<form [formGroup]="myForm"> <textbox-component></textbox-component> <radioButton-component></radioButton-component> </form>Angular 2創建嵌套組件的反應形式

而且我想用活性形式創建這個形式，我希望我的 HTML是不變僅透過打字稿有我的表單驗證。

但我無法找到任何解決方案我們如何能夠與組件嵌套的反應形式。

來源

2017-03-01 Mahesh Saibalwar

也許每個組件都會保留它自己的驗證器。在提交時，每個組件通過服務或事件發射器將值發送給父組件...未測試，但是這應該起作用 – mickdev

我無法在子組件中的html中添加formControlName屬性（這對於反應形式是必需的），它是拋出父指令的錯誤fromGroup不存在（因爲它存在於父項中） –

這就是爲什麼每個組件都應該保留它自己的formControlName和驗證器。父組件角色將實例化表單並獲取提交的所有數據。子組件將觸發有效或錯誤事件並通知父級允許或不允許提交...查看[嵌套模型驅動表單]（https://scotch.io/tutorials/how-to-build-nested -model-driven-forms-in-angular-2） – mickdev

經過我的研究&實驗，我發現一個答案給我的問題，所以自己回答。如果它節省了一些人的時間，那麼我會很高興。

如果你想創建一個嵌套的組分反應形式，那麼你可以做如下

我在這裏創建一個表單有兩個嵌套組件一個文本框&其他的單選按鈕

你父組件可以像這樣

<form [formGroup]="myForm"> 
    <child-textbox-component [parentFormGroup]="myForm"> 
    </child-textbox-component> 
    <child-radio-button-component [parentFormGroup]="myForm"> 
    </child-radio-button-component> 
</form>

我們傳遞FormGroup對象作爲輸入已在父組件被創建爲輸入到子組件的子組件S，他們將利用這一FormGroup對象在他們的組件設計之類的特定控制

你的孩子的組件會是這樣

兒童文本分量

<div class="form-group" [formGroup]="parentFormGroup"> 
    <label> 
    {{control.caption}} 
    </label> 
    <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name" 
    [value]="control.defaultValue" [formControlName]="control.name"/> 
</div>

兒童放射按鈕組分

<div class="form-group" [formGroup]="parentFormGroup"> 
    <label> 
    {{control.caption}} 
    </label> 
    <div> 
     <label *ngFor="let value of control.values; let idx = index" 
     class="radio-inline" [title]="control.tooltip"> 
     <input type="radio" [name]="control.name" [formControlName]="control.name"/> 
     {{ value }} 
     </label> 
    </div> 
</div>

下面是要顯示這些模型類保持數據控制10個子組件。

這樣你就可以使用嵌套組件生成你的表單，這樣你就不需要在單個的組件中擁有你的表單（可以說大表單）。您可以將其分解爲多個子組件&表單將易於創建&還可以使用角2的反應形式進行維護。您也可以輕鬆添加驗證。

我回答這個

來源

2017-03-06 07:03:46

你如何對子組件進行驗證？我們可以在子組件添加驗證還是在父組件上定義所有驗證？你可以發佈你的.ts文件代碼 –

這個答案看起來很有用，但它不完整。你可以請你張貼你的TS碼嗎？也就是說，如何以及在哪裏設置FormGroup對象及其控件。 – sgroves

你可以按照這個教程這個真棒https://toddmotto.com/component-architecture-reactive-forms-angular#the-presentational-form – Tabares

只是通過相同或子formGroup在形式與塊[formGroup]結合之前，接着這些鏈接。

來源

2018-01-05 07:42:50

Angular 2創建嵌套組件的反應形式

回答

相關問題