角度动态表单，包含来自JSON的元素组 [英] Angular dynamic form with groups of elements getting from JSON

问题描述

我正在进行角度应用和角度动态形式的构建。

I am making angular application and building of angular dynamic form.

这里我试图将表格拆分为两个部分，如人名和个人详细信息。

Here i am trying to split of form in two parts such as Person Name and Personal details..

对于Person Name，它的分组工作，但个人详细信息不起作用。

For Person Name its working for grouping but for Personal details its not working.

Html ：

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

JSON ：

  jsonData: any = [
    {
      "elementType": "group",
      "key": "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
        }
     ],
    },
        {
      "elementType": "group",
      "key": "personal_details",
      "children": [
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "email",
          "label": "Email",
          "type": "text",
          "value": "",
          "required": true,
          "minlength": 3,
          "maxlength": 20,
          "order": 1
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "mobile",
          "label": "Mobile",
          "type": "text",
          "value": "",
          "required": true,
          "order": 2
        }
     ],
    },
  ];

工作Stckblitz ： https://stackblitz.com/edit/angular-x4a5b6-5uj52y

在工作时一切正常..已经有一个团体是为人名和工作正常但但对于个人详细信息我无法找到输入框..

As of working everything works fine.. Already a group was made for Person name and its working fine but for Personal details i am unable to find the input boxes..

单个表单需要拆分，每个部分上方的标题符合此表单的要求。

A single form needs to get split up with titles above each part thats the requirement of this form.

此处 {{question.key} } 在每个输入框上显示名称，但我需要在顶部显示人名 ..因为它是父标题，其余为as 名字，姓氏是输入框标签..如何在每个部分之前单独显示父标题（人名（有姓名），个人详细信息（有电子邮件和移动电话））...

Here the {{question.key}} displays the name on each input boxes but i need to display only Person Name at top.. Because it is the parent title and the remaining such as First Name, Last Name are input box labels.. How to show the parent title alone in before of each part (Person Name (Has First and Last Name) , Personal Details (Has Email and Mobile))...

我想有奥德r分别与下面的标题分别如下。

I would like to have order split up exactly like the below with title for each respectively.

人名

 -> First Name
 -> Last Name

个人资料

 -> Email
 -> Mobile Number

如果我对上述方法有误，那么请帮我拆分 https://stackblitz.com/edit/angular-x4a5b6-geesde 动态表格如下面给出的方法..

If i am wrong with the above approach then kindly help me to split this https://stackblitz.com/edit/angular-x4a5b6-geesde dynamic form like the below given approach..

我的表格需要如下所示 https://stackblitz.com/edit/angular-zc34qr 但它需要采用纯角度动态形式和JSON加载..

My form needs to look like this https://stackblitz.com/edit/angular-zc34qr but it needs to be in pure angular dynamic form and JSON loading..

请帮助我创建一个个人详细信息组，如人名已经创建并正在运行..

Kindly help me to create a group Personal Details like the Person Name which was already created and working..

坚持很长时间，请帮助我...

Stuck for a long duration in this kindly help me please...

推荐答案

我不喜欢不明白为什么你在这里创建了额外的formGroup：

I don't understand why you creates additional formGroup here:

this.form = new FormGroup({main: innerForm});

只需使用您从服务中获得的formGroup：

Just use formGroup you're getting from your service:

dynamic-form.component.ts

this.form = this.qcs.toFormGroup(this.questions);

dynamic-form.component.html

<app-dynamic-group [questions]="questions" [form]="form"></app-dynamic-group>

现在，您不需要在DynamicGroupComponent上实现ControlValueAccessor。您正在将FormGroup传递给它，它应足以动态生成表单。

Now, you do not need to implement ControlValueAccessor on your DynamicGroupComponent. You're passing FormGroup to it and it should be enough to generate form dynamically.

dynamic-group.component.ts

@Component({
  selector: 'app-dynamic-group',
  templateUrl: './dynamic-group.component.html'
})
export class DynamicGroupComponent {
  @Input() form: FormGroup;

  @Input() questions: QuestionBase<any>[] = [];
}

dynamic-group.component.html

<div *ngFor="let question of questions" class="form-row">
    <app-question *ngIf="!question.children" [question]="question" [form]="form"></app-question>

    <app-dynamic-group 
       *ngIf="question.controlType === 'group' && question.children && question.children.length"
       [form]="form.get(question.key)"
       [questions]="question.children">
    </app-dynamic-group>
</div>

Forked Stackblitz

Forked Stackblitz

这篇关于角度动态表单，包含来自JSON的元素组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！