来自 JSON 的 Angular 8 动态表单

Question

I'm trying to generate dynamic form recursively from JSON schema, but i'm struggling with form control not being found. Here is Code Examples.

I get this error

ERROR Error: Cannot find control with name: 'createdAt'

I tried different approaches but there is still a problem. i know i miss something so please help. any help will be appreciated.

app.components.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;
  }
}

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>

Answer 1

You have to set the from group name on your #default ng-template

https://stackblitz.com/edit/angular-mc5zsd?file=src%2Fapp%2Fapp.component.html

Answer 2

Hi I am working on display and edit recursive JSON object as above but different structure.

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

Here is my code https://stackblitz.com/edit/angular-nwuuan?file=src/app/app.component.html

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

<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>

I am also following https://stackblitz.com/edit/angular-6n6nbd?file=src%2Fapp%2Fapp.component.html but no luck yet.

Thanks for help in advance.