Htykuut

Tried my level best please help me out..

I am making an angular dynamic form with a form splitting into total of three parts in which the two parts were made already. Now I am making part three which will be generated by selecting an option from dropdown...

Even those part also is done...

But I am unable to make a form array in it... As I am new in angular please help me.

HTML:

Form part 3 will be here which will be array

 <select multiple (change)="changeEvent($event)">

  <option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>

</select>



<div *ngFor="let item of array">

        {{item.value}} is the parent

  <div *ngFor="let child of item.templateChild">

    {{child.property_name}}

        <div *ngFor="let partThree of questionsParthree">

            <ng-container>

            <app-question [question]="partThree" [form]="formPartThree"></app-question>

        </ng-container>

    </div>

    </div>

  </div>

Select Box change event:

  changeEvent(e) {

    if (e.target.value == 1) {

      this.array = ;

      this.array.push(

        {

          key: 1, value: "Template one",

          templateChild: [

            { property_name: "Property one" },

            { property_name: "Property two" }

          ]

        }

      );

      let propertiesArray = ;

      this.array.forEach(element => {

        element.templateChild.forEach(data => {

          propertiesArray.push(

            {

              key: data.property_name,

              label: data.property_name,

              "elementType": "textbox",

              "type": "text"

            }

          )

        });

      });

      this.questionsPartThree = this.service.getQuestions(propertiesArray);

      this.formPartThree = this.qcs.toFormGroup(this.questionsPartThree);

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

    }

   }

Continuation like part 1 and 2..

I have posted the code related to creating the form array alone..

Updated Stackblitz https://stackblitz.com/edit/angular-x4a5b6-mnyifs

Here if we select any option then you will get the input boxes with values..

I would like to create array with it like,

If we select the first option Template One, Output expected is exactly as like

"templateChild" : [

{"property_one": "", "property_two":""}

]

So the final output of whole form going to be if i select Template One and also Template Two from select box (as select box is multi select),

{

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

    }

    ]

}

Have a work around in the demo i have provided and give me a better solution..

Kindly please help me to create a form as like the above when we select an option from dropdown.. If i am wrong in my approach also please correct me..

If i finish this third part then everything will get alright any angular technical expert please help me..

Taking too long please help me out..

You can dynamically change an AbstractController inside a FormGroup using the setControl() method.

Add an empty form3 part for the moment

this.form3 = new FormGroup({});



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

When selecting an item, generate a new FormGroup according the form you create.

if (e.target.value == 1) {

  this.array = ;

  this.form3 = new FormGroup({'Property one': new FormControl('insert whatever you want')});

  this.formJoin.setControl('form3', this.form3);

You should be able to do something what that start!