如何基于输入字段中的值或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>

在子组件（layout-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在评论中说请问一个特定的问题，问题和代码可以得到更详细的答案。