Группировать входы как массив

Question

Я делаю угловое приложение с угловой динамической формой. Здесь я делаю форму, в которой у меня есть поле выбора.

При нажатии на поле выбора я хотел бы создать поля ввода, которые должныбыть массивом ..

Здесь даже генерация текстовых полей не работает ..

HTML

<div *ngFor="let item of array">
        {{item.value}} is the parent
  <div *ngFor="let child of item.templateChild">
    {{child.property_name}}
    <input type="text" [value]="child.property_name">
        <div *ngFor="let partThree of questionsParthree">
            <ng-container>
            <app-question [question]="partThree" [form]="formPartThree"></app-question>

        </ng-container>
    </div>
    </div>
  </div>

TS:

  this.questionsPartThree = this.service.getQuestions(element);
        console.log(values);

  this.formPartThree = this.qcs.toFormGroup(this.questionsPartThree);
  this.formJoin = new FormGroup({ form1: this.form, form2: this.formPartTwo, template_data: this.formPartThree });

Попытка сделать formArray внутри вышеупомянутого html, но я получаю ошибку как cannot find control name template_properties.

Чтобы перепутать и сделать неясный вопрос, я уменьшилкод и все, что вы получите в демоверсии ..

рабочий стекблиц: https://stackblitz.com/edit/angular-x4a5b6-wyqdzn

Текущий вывод формы:

{
  "form1": {
    "project_name": "",
    "project_desc": ""
  },
  "form2": {
    "property_one": "",
    "property_two": ""
  },
  "template_data": {
    "template_details": [
      {
        "Propertyone": "",
        "Propertytwo": "",
        "Propertythree": "",
        "Propertyfour": "",
        "Propertyfive": ""
      }
    ]
  }
}

Ожидаемый результат:

{
  "form1": {
    "project_name": "",
    "project_desc": ""
  },
  "form2": {
    "property_one": "",
    "property_two": ""
  },
    "template_details" : [
    { "template_name": "Template One",
      "templateChild" : [{"property_one": "", "property_two":""}]
    },
    { "template_name": "Template Two",
      "templateChild" : [{"property_three": "", "property_four":"", 
                            "property_five":""}]
    }
    ]
}

Если я выберу несколько опций (так как поле выбора является множественным выбором), то в template_properties.

* должно образоваться следующее.1038 * Форма состоит из трех частей, не обращайте внимания на первую и вторую части. Поле выбора относится только к третьей части.

Пожалуйста, обратитесь к ожидаемому выводу выше, чтобы иметь структуру JSON формы .. Если я выберу два, он не должен заменять значения, он должен получить несколько объектов внутри массива template_properties ..

{ "template_name": "Template One",
          "templateChild" : [{"property_one": "", "property_two":""}]
        },
        { "template_name": "Template Two",
          "templateChild" : [{"property_three": "", "property_four":"", 
                                "property_five":""}]
        }

Изо всех сил, но я не могу найти правильное решение ... Любой человек, помогающий мне, пожалуйста, помогите мне достичь ожидаемого результата от токового выхода, используя demo ..

Answer 1

Просто создайте «template_details» как FormArray, у которого есть FormGroups, у каждой группы есть «tenplate_name» FormControl и «template_child» FormArray.

замените ваш динамический компонент формы следующим:

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl, AbstractControl } from '@angular/forms';

import { QuestionBase } from './question-base';
import { QuestionControlService } from './question-control.service';

import { QuestionService } from './question.service';


@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  providers: [QuestionControlService]
})
export class DynamicFormComponent implements OnInit {

  @Input() questions: QuestionBase<any>[] = [];
  @Input() questionsPartTwo: QuestionBase<any>[] = [];
  @Input() questionsPartThree: QuestionBase<any>[] = [];
  form: FormGroup;
  formPartTwo: FormGroup;
  formPartThree: FormGroup;
  formJoin: FormGroup;
  formJoin2: FormGroup;
  payLoad = '';
  allquestions: QuestionBase<any>[] = [];
  selectItems: any;

  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
    }
  ]

  persons = [
    {
      key: 1, value: "Template one",
      personOneChild: [
        { property_name: "Property one" },
        { property_name: "Property two" }
      ]
    },
    {
      key: 2, value: "Template two",
      personTwoChild: [
        { property_name: "Property three" },
        { property_name: "Property four" },
        { property_name: "Property five" }
      ]
    },
    {
      key: 3, value: "Template three",
      personThreeChild: [
        { property_name: "Property six" },
        { property_name: "Property seven" }
      ]
    }
  ]

  array: any[] = [];

  constructor(private service: QuestionService, private qcs: QuestionControlService) { }
  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 });



  }
  changeEvent(e) {
    this.array = [];
    for (let select of this.selectItems) {
      let propertiesArray = [];

      this.array.forEach(element => {
        element.templateChild.forEach(data => {
          propertiesArray.push(
            {
              key: data.property_name.replace(' ',''),
              label: data.property_name,
              "elementType": "textbox",
              "type": "text"
            }
          )
        });
      });
      let values:any[]=propertiesArray.map(x=>x.key);
      let element=[{
        "elementType": "array",
        "key": "template_details",
        "value":values,
        "children":propertiesArray
      }]

      this.questionsPartThree = this.service.getQuestions(element);
            console.log(values);

      this.formPartThree = this.buildForm(+select) as AbstractControl;
      this.formJoin = new FormGroup({ form1: this.form, form2: this.formPartTwo, template_data: this.formPartThree });

    }
  }

  buildForm(selecteVal: number) {
    switch (selecteVal) {
        case 1:
          return new FormArray([
            new FormGroup({
              template_name: new FormControl("Template One"),
              template_child: new FormArray([
                new FormGroup({
                  property_one: new FormControl("property one"),
                  property_two: new FormControl("property two"),
                })
              ]),
            })
          ])
        case 2:
          return new FormArray([
            new FormGroup({
              template_name: new FormControl("Template One"),
              template_child: new FormArray([
                new FormGroup({
                  property_three: new FormControl("property three"),
                  property_four: new FormControl("property four"),
                })
              ]),
            })
          ])

          break;
        case 3:
return new FormArray([
            new FormGroup({
              template_name: new FormControl("Template One"),
              template_child: new FormArray([
                new FormGroup({
                  property_five: new FormControl("property five"),
                  property_six: new FormControl("property six"),
                })
              ]),
            })
          ])
          break;
      }
  }

  onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
  }

}


/*
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/