Create inputs as array in angular form

Question

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

Answer 1

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!