代码之家 › 专栏 › 技术社区 › Maniraj Murugan

将角形拆分为多个部分

angular-reactive-forms typescript angular json javascript

-2

Maniraj Murugan · 技术社区 · 6 年前

  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个输入框(计数可能不同,且不是静态的)。。

https://stackblitz.com/edit/angular-x4a5b6-geesde

在这个示例中,您可以看到Json是以完整的形式生成的,并且无法将标题放在我想要的位置之间。。

我如何在表格中分开,并为各自的部分命名。。

人员姓名

 -> First Name
 -> Last Name

个人详细信息

 -> Email
 -> Mobile Number
 -> Age

家庭详细信息

 -> Father Name
 -> Mother Name

请通过 demo ,其中包含JSON文件,请帮助我按上述顺序拆分表单。

2 回复 | 直到 6 年前

Daniil Andreyevich Baunov 6 年前

我曾经实现过类似于你现在所做的事情。这个想法是创造一个特殊的 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=“让问题的问题”class=“form row”>
<ng container*ngIf=“question.elementType==”组“&&问题:儿童和&question.children.length>0英寸>
</ng容器>

如果你需要进一步的解释,请告诉我。

以下是一个工作版本: https://stackblitz.com/edit/angular-x4a5b6-gwkc2z?file=src%2Fapp%2Fdynamic-group.component.html

Chellappan à®µ 6 年前

<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

控制容器

包含多个已注册实例的指令的基类控制的力量。仅由窗体模块使用。

ViewProviders提供ControlContainer并使用现有的formGroupDiretive获取父窗体,然后添加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