Html JSON中的Angular 8动态表单

我试图从JSON模式递归地生成动态表单，但我很难找到表单控件。下面是代码示例

我得到这个错误

错误：找不到名为“createdAt”的控件

我尝试了不同的方法，但仍然存在一个问题。我知道我错过了一些东西，所以请帮忙。任何帮助都将不胜感激

应用程序组件.ts

export class AppComponent implements OnInit {
  filterForm: FormGroup;
  filterFields: any[];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.filterFields = [
      {
        key: "common",
        title: "main fields",
        group: [
          {
            key: "createdAt",
            title: "Create Date",
            type: "date"
          }
        ]
      },
      {
        key: "individualPerson",
        title: "Physical Person",
        group: [
          {
            key: "firstname",
            title: "First Name",
            type: "text"
          },
          {
            key: "lastname",
            title: "Last Name",
            type: "text"
          },
          {
            key: "phone",
            title: "Phone Number",
            type: "text"
          },
          {
            key: "citizenshipCountry",
            title: "Country",
            type: "text"
          }
        ]
      },
      {
        key: "legalPerson",
        title: "Legal Person",
        group: [
          {
            key: "brandname",
            title: "Brand Name",
            type: "text"
          },
          {
            key: "fullname",
            title: "Full Name",
            type: "text"
          },
          {
            key: "phone",
            title: "Phone",
            type: "text"
          },
          {
            key: "registrationCountry",
            title: "Country",
            type: "text"
          }
        ]
      }
    ];

    this.filterForm = this.generateFilterForm();
  }

  generateFilterForm(): FormGroup {
    const baseForm = this.fb.group({});
    this.filterFields.forEach(field => {
      baseForm.addControl(field.key, this.generateFormGroup(baseForm, field));
    });
    console.log(baseForm);
    return baseForm;
  }

  generateFormGroup(baseForm: FormGroup, field: TableFilter): FormGroup {
    if (field.group) {
      const formGroup = this.fb.group({});
      field.group.forEach(item => {
        formGroup.addControl(item.key, this.generateFormGroup(formGroup, item));
      });
      return formGroup;
    } else {
      baseForm.addControl(field.key, new FormControl(""));
    }
    return baseForm;
  }
}

<pre>{{filterForm?.value|json}}</pre>

<form [formGroup]="filterForm" class="filter-form">
    <ng-template #recursiveList let-filterFields let-fromGroup="fromGroup">
        <ng-container *ngFor="let filter of filterFields let i=index">
           <ng-container *ngFor="let item of filter | keyvalue">
           <p>{{item.key}}</p>

            <!-- <ng-container *ngIf="item.group; else default;"> -->
               
                <!-- <div  [formGroupName]="item.key">
                    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.group, fromGroup: {name: item.key} }"></ng-container>
                </div> -->
            <!-- </ng-container>
            <ng-template #default> -->
                <div class="form-group" >
                        <input [type]="text" [formControlName]="item.key" [name]="item.key" [value]="item.value"/>
                    </div>
            <!-- </ng-template> -->
             </ng-container>
        </ng-container>
    </ng-template>
    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: filterFields }"></ng-container>
</form>

app.component.html

<form [formGroup]="filterForm" class="filter-form">
  <ng-template #recursiveList let-filterFields>
    <ng-container *ngFor="let item of filterFields">
      <ng-container *ngIf="item.group; else default;">
        <p>{{item.title}}</p>
        <div class="row pb-4" [formGroupName]="item.key">
          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.group }"></ng-container>
        </div>
      </ng-container>
      <ng-template #default>
        <div class="col-md-3">
          <div class="form-group">
            <input [type]="item.type" [formControlName]="item.key" [placeholder]="item.title" [name]="item.key" />
          </div>
        </div>
      </ng-template>
    </ng-container>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: filterFields }"></ng-container>
</form>

{{item.title}

您必须在

#默认

ng模板上设置from组名称

---

您好，我正在处理如上所述的显示和编辑递归JSON对象，但结构不同

Error: ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateDirectives]

这是我的密码

app.component.ts

import { Component } from '@angular/core';
import {FormGroup,FormControl,FormBuilder} from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
filterForm: FormGroup;
  filterFields: any[];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {    
this.filterFields = [ 
            {"signature": "[a][b][c][d]",
            "id": "start3",
            "passwd": "going",
            "url": "https://example.com",
            "code": "ME_GOOD",
            "type": "ABCD",
            "main":{
            "description": "development",
            "id": "98gbnuikmvgy6",
            "name": "satsba",
            "type": "dcba",
            "upload": "2019-09-04 18:17:23.222",
            "by": "example@gmail.com",
                        "version": "0.1"}}            ];

        this.filterForm = this.generateFilterForm();
  }

  generateFilterForm(): FormGroup {
    const baseForm = this.fb.group({});
    this.filterFields.forEach(field => {
      baseForm.addControl(field.key, this.generateFormGroup(baseForm, field));
      // console.log('field:',field);
    });
    // console.log('baseForm:',baseForm);
    return baseForm;
  }

  generateFormGroup(baseForm: FormGroup, field): FormGroup|FormControl {
  const formGroup = this.fb.group({});

    Object.keys(field).forEach(function(key) {
    formGroup.addControl(key, new FormControl(""));
    });
    console.log('formGroup',formGroup);
    return formGroup;
  }  
  }

app.component.html

{{filterment？.value | json}
{{item.key}

我也在跟随，但还没有运气

提前谢谢你的帮助