如何根據輸入字段中的值或Angular 2中的下拉列表動態創建表單

Question

我的新項目中的一個要求是在Angular 2的單個頁面上創建表單。表單非常複雜。我應該包含另外兩個基於輸入值動態填充的模板。我會試着解釋它應該如何工作。

頁面頂部應該有三個下拉菜單（例如No.1,2,3），並且基於這些下拉菜單中的值，具有下拉菜單（No.4）的特定模板和一對輸入字段應該是顯示。如果選擇下拉No.4中的值，則應再次顯示其他輸入和下拉字段的更多特定模板。當填寫輸入並選擇下拉菜單時，表格應發送。

每個下拉列表應該由從服務器接收的值填充。該表格也必須經過驗證。

我的想法是創建一個主窗體，並以該窗體的形式顯示一個組件，該組件將基於在下拉列表中選擇的值進行顯示。

喜歡的東西在父組件：

<form> 
    <dropdown [(ngModel)]="layout"></dropdown> 
    <layout-1 *ngIf="layout==1"></layout-1> 
</form> 

在子組件（佈局-1）：

<div [formGroup]="layoutForm"> 
    <dropdown [(ngModel)]="subLayout"></dropdown> 
    <sub-layout *ngIf="subLayout==1"></sub-layout> 
<div> 

在接下來的子組件（子佈局）：

<div [formGroup]="subLayoutForm"> 
    <input/> 
    <input/> 
    <dropdown><dropdown> 
</div> 

這將是一種'三級'嵌套形式。

任何想法如何在Angular 2中做到這一點？

Answer 1

您可以使用ngIf來創建特定的表單。在此ng中，如果您可以使用顯示下拉列表的選定值的變量。看起來是這樣的：

<div *ngIf="selectedValue=='no1'> 
... form for no1 here 
</div> 
<div *ngIf="selectedValue='no2'> 
... form for no2 here 
</div> 
etc. 

對於表單驗證來看看這個鏈接：FormValidation

但岡特Zöchbauer說，在評論請詢問您的問題，你得到一個更具體的問題和代碼詳細的答案。