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

Question

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

該頁面的頂部應具有三個下拉菜單（例如No.1、2、3），並根據這些下拉菜單中的值，顯示帶有下拉菜單的特定模板（No.4），並顯示幾個輸入字段。 如果選擇了下拉菜單編號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來創建特定的表單。 在此ngIf中，可以使用顯示下拉列表的選定值的變量。 可能看起來像這樣：

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

對於表單驗證，請查看以下鏈接： FormValidation

但是GünterZöchbauer在評論中說，請針對您的問題和獲得更詳細答案的代碼提出具體問題。