如何在 angular 中合并单个表格的两个部分？

Question

我正在使用 angular 动态表单制作 angular 应用程序，我正在通过 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看起来像，

<div>
    <form (ngSubmit)="onSubmit()" [formGroup]="form">

 <h4> <b> Form Part One begins from here </b> </h4>
        <div *ngFor="let question of questions" class="form-row">
            <ng-container>
                <app-question [question]="question" [form]="form"></app-question>
            </ng-container>
        </div>

 <h4> <b> Form Part Two begins from here </b> </h4>

    <div *ngFor="let partTwo of questionsPartTwo">
                <ng-container>
                <app-question [question]="partTwo" [form]="formPartTwo"></app-question>

            </ng-container>
        </div>

        <div class="form-row">
            <button type="submit" [disabled]="!form.valid">Save</button>
    </div>
  </form> <br>

  <pre>
{{form?.value|json}}
</pre>
</div>

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

在我的实际应用程序中，我有两个 json 数据并分别加载每个数据并分配表格所以请不要打破第一部分和第二部分 json..

让我在这里停止代码，因为它越来越长，你可能会感到困惑..

这是一个有效的 stackblitz： https://stackblitz.com/edit/angular-x4a5b6-2rykpo

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

请帮助我将拆分的 JSON 加载到 this.service.getQuestions 并得到两个部分并将它们加入最终输出以提交..

如果我的方法有误，请帮助我更正它，因为我是 angular 和动态形式的新手。它需要采用 angular 动态形式和 json仅加载其中没有变化..

我期待的帮助是在提交表单时结合第 1 部分和第 2 部分..

请帮助我，我坚持了很长时间才能摆脱它..

Answer 1

你可以采取几种方法

1.-创建一个 formJoin，它是 {form1:form1 的问题，form2: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 中有两个函数。如果您看到的是同一个函数，那么您 "feed" 具有不同参数的函数，但是是同一个函数。

在the stackblitz中有两个选项一起[=13=]

更新更新代码休息一下，

Answer 2

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

Parent.component.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>

child.component.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

如何在 angular 中合并单个表格的两个部分？

How to combine two parts of single form in angular?

javascript

json

typescript

angular

angular-reactive-forms