Question

我正在使用角度动态表单制作表单构建器，其中我从JSON加载表单数据，

  jsonData: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "first_name",
      "label": "First Name (Part 1 has first name and last name with title name of Person Name)",
      "type": "text",
      "value": "",
      "required": true,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "last_name",
      "label": "Last Name",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "email",
      "label": "Email (Part 2 begins from here with title Personal details)",
      "type": "text",
      "value": "",
      "required": true,
      "minlength": 3,
      "maxlength": 20,
      "order": 3
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "mobile",
      "label": "Mobile Number",
      "type": "text",
      "value": "",
      "required": true,
      "order": 4
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "age",
      "label": "Age",
      "type": "text",
      "value": "",
      "required": true,
      "order": 4
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "Father Name",
      "label": "Father Name (Part 3 begins from here with Family details)",
      "type": "text",
      "value": "",
      "required": true,
      "minlength": 3,
      "maxlength": 20,
      "order": 5
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "mother_name",
      "label": "Mother Name",
      "type": "text",
      "value": "",
      "required": true,
      "order": 6
    }

  ];

在这里，一切都可以正常生成完整的表格。

但是我想将表格分为人名，个人详细信息，家庭详细信息，分别带有2、3、2个输入框（计数可能有所不同，并且不是静态的。）< / p>

一个清晰的示例 https://stackblitz.com/edit/angular-x4a5b6-geesde

在此示例中，您可以看到Json生成为完整表格，并且无法在我想要的位置之间创建标题。

我该如何拆分表格并为各个部分启动标题。

我想按照下面的顺序分别分配标题，分别分配标题。

人名

 -> First Name
 -> Last Name

个人详细信息

 -> Email
 -> Mobile Number
 -> Age

家庭详细信息

 -> Father Name
 -> Mother Name

请仔细检查demo，该文件中包含带有JSON的文件，并请我按上述顺序拆分表格。

Answer 1

我曾经实现过与您现在正在执行的操作类似的操作。这个想法是创建一个特殊的elementType来保存元素组。

例如，人名的组配置将如下所示：

const grouped: any = {
  "elementType": "group",
  "label": "Person Name",
  "children":[
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "first_name",
      "label": "First Name",
      "type": "text",
      "value": "",
      "required": true,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "last_name",
      "label": "Last Name",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    }
  ]
};

对于该组，您将需要创建一个循环遍历子级的单独组件。您还应该考虑组内有组的情况。因此，您需要使其递归。

例如

<div *ngFor="let question of questions" class="form-row">
    <ng-container *ngIf="!question.children">
                    <app-question [question]="question" [form]="form"></app-question>
    </ng-container>
    <ng-container *ngIf="question.elementType === "group" && question.children && question.children.length > 0">
                    <app-dynamic-group [questions]="question.children" [form]="form"></app-dynamic-group>
    </ng-container>
</div>

在组容器内部组件中，您实际上执行的操作与动态表单中的操作非常相似，因此，您可以组合以下功能：

<div *ngFor="let question of questions" class="form-row">
    <ng-container *ngIf="!question.children">
                    <app-question [question]="question" [form]="form"></app-question>
    </ng-container>
    <ng-container *ngIf="question.elementType === "group" && question.children && question.children.length > 0">
                    <app-dynamic-group [questions]="question.children" [form]="form"></app-dynamic-group>
    </ng-container>
</div>

如果您需要进一步的说明，请告诉我。

这是一个有效的版本：https://stackblitz.com/edit/angular-x4a5b6-gwkc2z?file=src%2Fapp%2Fdynamic-group.component.html

Answer 2

如果要创建子表单组件

在顶层表单组件中放置所有子组件

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <app-person></app-person>
  <app-family></app-family>
  <app-personal></app-personal>
  <button class="btn btn primary">Save</button>
</form>

使用ControlContainer

ControlContainer

包含多个注册实例的指令的基类 NgControl。仅由表单模块使用。

ViewProviders提供ControlContainer并使用现有的formGroupDiretive获取parentForm然后添加formControl

app-person.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, ControlContainer, FormGroupDirective } from '@angular/forms';
@Component({
  selector: 'app-personal',
  templateUrl: './personal.component.html',
  styleUrls: ['./personal.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class PersonalComponent implements OnInit {
  personalForm;
  constructor(private parentForm: FormGroupDirective) { }
  ngOnInit() {
    this.personalForm = this.parentForm.form;
    this.personalForm.addControl('personal', new FormGroup({
      email: new FormControl(''),
      mobile: new FormControl(''),
      age: new FormControl('')
    }))
  }
}

示例：https://stackblitz.com/edit/angular-ewdzmp

将角度形式分成多个部分

2 个答案: