Btukfyl

I am making angular application with angular dynamic form.. Here i am making the form where i have a select box..

On click over the select box i would like to generate the input boxes which needs to be array..

Here even the generation of textboxes doesn't works..

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 });

Tried with making formArray inside the above listed html but i am getting error as cannot find control name template_properties.

In order to confuse and make unclear question i have reduced the code and everything you will get in demo..

The working stackblitz: https://stackblitz.com/edit/angular-x4a5b6-wyqdzn

The current output of form is,

{

  "form1": {

    "project_name": "",

    "project_desc": ""

  },

  "form2": {

    "property_one": "",

    "property_two": ""

  },

  "template_data": {

    "template_details": [

      {

        "Propertyone": "",

        "Propertytwo": "",

        "Propertythree": "",

        "Propertyfour": "",

        "Propertyfive": ""

      }

    ]

  }

}

Expected Output:

{

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

    }

    ]

}

If i select multiple options (as select box is multi select), the following is expected to form inside the template_properties.

Form has three parts, kindly don't care about the first and second part.. The select box is related to third part only..

Please refer the expected output above to have a JSON structure of form.. If i select two then it should not replace the values it should get multiple objects inside array template_properties..

{ "template_name": "Template One",

          "templateChild" : [{"property_one": "", "property_two":""}]

        },

        { "template_name": "Template Two",

          "templateChild" : [{"property_three": "", "property_four":"", 

                                "property_five":""}]

        }

Struggling a lot and lot but i am unable to get a right solution.. Any angular person please help me to achieve the expected output from the current output using the demo ..

Just create “template_details” as FormArray that has FormGroups that each group has “tenplate_name” FormControl and “template_child” FormArray.

replace your dynamic form component with this:

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

*/