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

In stackblitz.com/edit/angular-x4a5b6-tvuih2 I clarified how create the array. See the changes in question-control.service -to add an array- and how manage a item select multiple (try the part of show the array) — Eliseo
– Eliseo, Commented Nov 21, 2018 at 9:54
@Eliseo, Thanks Eliseo, But this example helps me half way only.. Because i am creating input boxes of properties based on the selected dropdown which going to be under template_details.. On each selection, the template_details going to get added instead of appending each property under template_details.. I kindly request you to refer my expected output in the question that is my expectation.. I would like to appreciate still for your help.. Also i am having doubt should i need to create [formArrayName] for those dynamic textboxes.. — Maniraj Murugan
– Maniraj Murugan, Commented Nov 21, 2018 at 10:30
use this as a example and try: stackblitz.com/edit/angular-kbu1kv — Chellappan வ
– Chellappan வ, Commented Nov 26, 2018 at 6:15
Thanks for your response bro.., If you get time kindly make the expected json as like given in question.. I need to do make it as part three in that single form.. — Maniraj Murugan
– Maniraj Murugan, Commented Nov 26, 2018 at 7:04

Kapcash · Accepted Answer · 2018-11-20 16:50:39Z

0

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!

answered Nov 20, 2018 at 16:50

Kapcash

6,9802 gold badges22 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kapcash Over a year ago

Here are the changes : stackblitz.com/edit/angular-x4a5b6-v2uqk4?file=src/app/… You have to add the correct binding to the form input to be done

Collectives™ on Stack Overflow

Create inputs as array in angular form

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related