基于动态嵌套对象数组的Angular 5动态表单实现需求（*ngFor）

嘿，我来帮你搞定这个Angular 5的动态嵌套表单需求！你手头的这个嵌套对象数组刚好可以用递归模板来处理，不管数据嵌套多少层，都能自动渲染对应的表单控件，完全符合你要的动态效果。

第一步：准备你的数据源 #

首先把你提供的嵌套数组定义成组件的属性：

// 组件类中的数据定义
formData = [
  { "key": "unitName", "value": "DESKTOP" },
  { "key": "store", "value": "Lucan" },
  { "key": "app", "value": [
      { "key": "fullscreen", "value": true },
      { "key": "height", "value": 1920 },
      { "key": "setPosition", "value": [
          { "key": "x", "value": 25 },
          { "key": "y", "value": 0 }
        ]
      },
      { "key": "devMode", "value": true },
      { "key": "disableZoom", "value": false }
    ]
  }
];

第二步：编写递归模板实现动态渲染 #

我们用Angular的ng-template和*ngTemplateOutlet来实现递归渲染，这样不用额外创建组件，代码更简洁。模板里会自动判断当前项的value类型：如果是数组就递归渲染子表单，否则渲染对应的输入控件。

<!-- 组件模板 -->
<form #dynamicForm="ngForm">
  <!-- 定义递归模板，接收items作为输入 -->
  <ng-template #recursiveForm let-items>
    <div *ngFor="let item of items" class="form-group">
      <label>{{item.key}}</label>
      
      <!-- 处理嵌套数组：递归调用模板 -->
      <div *ngIf="Array.isArray(item.value)" class="nested-form">
        <ng-container *ngTemplateOutlet="recursiveForm; context:{ $implicit: item.value }"></ng-container>
      </div>
      
      <!-- 处理布尔值：渲染复选框 -->
      <div *ngIf="typeof item.value === 'boolean'">
        <input type="checkbox" [(ngModel)]="item.value" name="{{item.key}}">
      </div>
      
      <!-- 处理字符串/数字：渲染文本输入框 -->
      <div *ngIf="typeof item.value === 'string' || typeof item.value === 'number'">
        <input type="text" [(ngModel)]="item.value" name="{{item.key}}" class="form-control">
      </div>
    </div>
  </ng-template>

  <!-- 初始化调用递归模板，传入根数据 -->
  <ng-container *ngTemplateOutlet="recursiveForm; context:{ $implicit: formData }"></ng-container>
</form>

<!-- 可选：添加按钮查看表单数据变化 -->
<button class="btn btn-primary" (click)="logFormValues()">查看当前表单值</button>

第三步：添加辅助方法（可选） #

在组件类里加个方法，方便你查看用户修改表单后的数据变化：

logFormValues() {
  console.log('当前表单数据：', this.formData);
}

第四步：添加样式优化嵌套显示（可选） #

给嵌套表单加个简单的样式，让层级更清晰：

.form-group {
  margin: 12px 0;
}
.nested-form {
  margin-left: 24px;
  padding-left: 12px;
  border-left: 1px solid #e0e0e0;
}
label {
  display: inline-block;
  width: 120px;
  font-weight: 500;
}
input.form-control {
  padding: 4px 8px;
  width: 200px;
}

关键注意点 #

1. 导入FormsModule：别忘了在你的模块里导入FormsModule，否则ngModel会报错：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块
    FormsModule
  ]
})
export class YourModule { }

2. 控件唯一性：每个表单控件的name属性用item.key，确保Angular表单能正确识别每个控件。
3. 扩展类型支持：如果你的数据还有其他类型（比如对象），可以扩展模板里的判断逻辑，添加对应的控件渲染。

内容的提问来源于stack exchange，提问作者tarek noaman