如何将单一形式的两个部分以角度组合在一起？

Question

我正在使用角度动态表单制作角度应用程序，其中我通过 JSON 加载动态表单的数据。

JSON 有两部分，例如第 1 部分和第 2 部分，

  jsonDataPart1: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": false,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    }
  ]

  jsonDataPart2: any = [
            {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_one",
          "label": "Property One",
          "type": "text",
          "value": "",
          "required": true,
          "order": 3
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_two",
          "label": "Property Two",
          "type": "text",
          "value": "",
          "required": true,
          "order": 4
        },
        {
          "elementType": "radio",
          "class": "col-12 col-md-3 col-sm-12",
          "key": "property_required",
          "label": "Property Required",
          "options": [
            {
              "key": "required",
              "value": "Required"
            },
            {
              "key": "not_required",
              "value": "Not Required"
            }
          ],
          "order": 5
        },
        {
          "elementType": "checkbox",
          "class": "col-12 col-md-3 col-sm-12",
          "key": "property_check",
          "label": "Property Required",
          "order": 6
        }
  ]

我将 JSON 作为单独的部分加载，例如

  ngOnInit() {
    //Building form first part
    this.questions = this.service.getQuestions(this.jsonDataPart1)
    this.form = this.qcs.toFormGroup(this.questions);

        //Building form second part
    this.questionsPartTwo = this.service.getQuestions(this.jsonDataPart2)
    this.formPartTwo = this.qcs.toFormGroupPartTwo(this.questionsPartTwo);
  }

HTML 看起来像，

  jsonDataPart1: any = [
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_name",
      "label": "Project Name",
      "type": "text",
      "value": "",
      "required": false,
      "minlength": 3,
      "maxlength": 20,
      "order": 1
    },
    {
      "elementType": "textbox",
      "class": "col-12 col-md-4 col-sm-12",
      "key": "project_desc",
      "label": "Project Description",
      "type": "text",
      "value": "",
      "required": true,
      "order": 2
    }
  ]

  jsonDataPart2: any = [
            {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_one",
          "label": "Property One",
          "type": "text",
          "value": "",
          "required": true,
          "order": 3
        },
        {
          "elementType": "textbox",
          "class": "col-12 col-md-4 col-sm-12",
          "key": "property_two",
          "label": "Property Two",
          "type": "text",
          "value": "",
          "required": true,
          "order": 4
        },
        {
          "elementType": "radio",
          "class": "col-12 col-md-3 col-sm-12",
          "key": "property_required",
          "label": "Property Required",
          "options": [
            {
              "key": "required",
              "value": "Required"
            },
            {
              "key": "not_required",
              "value": "Not Required"
            }
          ],
          "order": 5
        },
        {
          "elementType": "checkbox",
          "class": "col-12 col-md-3 col-sm-12",
          "key": "property_check",
          "label": "Property Required",
          "order": 6
        }
  ]

我需要将这两者结合起来，并且需要获得整个单一表单的单一输出。

在我的实际应用程序中，我有两个 json 数据，并分别加载每个数据并分配表单，因此请不要分解第一部分和第二部分 json。

让我在这里停止代码，因为它变得很长，你可能会感到困惑。

这是一个工作 stackblitz： https://stackblitz.com/edit/angular-x4a5b6-2rykpo

只要采取解决方法dynamic-form.component.ts and dynamic-form.component.html你就会清楚我做了什么..

请帮助我加载分割的 JSONthis.service.getQuestions并获取两个部分，并将它们加入到最终输出中以提交。

如果我的方法错误，请帮助我纠正它，因为我是角度和动态形式的新手。它需要采用角度动态形式，并且json仅加载，没有任何变化。

我期望的帮助是在提交表单时将第 1 部分和第 2 部分结合起来。

请帮助我，我被困了很长时间才能摆脱它。

Answer 1

使用顶级表单并将子表单包装在父表单内，并使用提供程序来使用现有表单

父组件.html

<form [formGroup]="form" (ngSubmit)="onClick();">
    <h1>Part1</h1>
    <div class="row" formArrayName="part1" *ngFor="let c of form['controls']['part1']['controls'];let i =index">
        <div class="col">
            <input [attr.type]="jsonDataPart1[i].type"
        class="form-control" [attr.placeholder]="jsonDataPart1[i].label"
         [formControlName]="i" >
    </div>
  </div>

  <app-part2 [part2]="jsonDataPart2">
     <h1>Part2</h1>
  </app-part2>
<br>
<button class="btn btn-primary">Save</button>
</form>

子组件.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl, ControlContainer, FormGroupDirective, FormArray } from '@angular/forms';
@Component({
  selector: 'app-part2',
  templateUrl: './part2.component.html',
  styleUrls: ['./part2.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class Part2Component implements OnInit {
  @Input('part2') part2;
  part2Form;
  constructor(private parentForm: FormGroupDirective) { }

  ngOnInit() {
    this.part2Form = this.parentForm.form;
    const control = this.part2.map(d => new FormControl());
    this.part2Form.addControl('part2F', new FormGroup({
      part2: new FormArray(control)
    }))
  }
}

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

Answer 2

你可以采取几种方法

1.-创建一个 formJoin 为 {form1:questions of form1,form2:questions of form2}

在你的 ngOnInit 中

formJoin:FormGroup;
ngOnInit()
{
    this.questions = this.service.getQuestions(this.jsonDataPart1)
    this.form = this.qcs.toFormGroup(this.questions);

    this.questionsPartTwo = this.service.getQuestions(this.jsonDataPart2)
    this.formPartTwo = this.qcs.toFormGroup(this.questionsPartTwo);

    this.formJoin=new FormGroup({form1:this.form,form2:this.formPartTwo})
}

//In your .html 
<form (ngSubmit)="onSubmit()" [formGroup]="formJoin">

2.-将问题加入到唯一的json中

this.allquestions=this.service.getQuestions(
        this.jsonDataPart1.concat(this.jsonDataPart2));
this.formJoin2=this.qcs.toFormGroup(this.allquestions);
//get the first question.key in the second form
this.questionBreak=this.jsonDataPart2[0].key;

//In your .html
<form  (ngSubmit)="onSubmit()" [formGroup]="formJoin2">

 <h4> <b> An uniq Form </b> </h4>
    <div *ngFor="let question of allquestions" class="form-row">
       <!--make a break fro the secondForm-->
       <ng-container *ngIf="question.key==questionBreak">
           <h4> <b> Form Part Two begins from here </b> </h4>
       </ng-container>
        <ng-container>
            <app-question [question]="question" [form]="formJoin2"></app-question>
        </ng-container>
    </div>
 </form>

重要提示：您不需要在 toFormGroup 和 toFormGroupPartTwo 服务中使用两个函数。如果您看到是相同的函数，则您可以使用不同的参数“提供”该函数，但它是相同的函数。

在stackblitz中有两个选项在一起

更新 更新代码以进行中断，