Dynamically add control to form in angular

Question

I've created this form here: https://stackblitz.com/edit/angular-ay58g9

I'm getting an error when selecting the option from select menu that I'm not able to solve.

Also, I want the output like this:

When 'form data' selected in dropdown:
[
  data_type: 'form_data',
  form_data: {
    firstname: "saurabh",
    lastname: "Sharma"
  }
]

When 'form data' selected in dropdown:
[
  data_type: 'raw_data',
  raw_data: {
    email: "[email protected]",
    contactno: "9999999999"
  }
]

COuld you please look into it and tell me what I'm doing wrong?

Welcome to StackOverflow! Please make sure to add a minimal verifiable code snippet for others to take a look and understand your problem. For more details on how to create minimal reproducible example — nircraft
– nircraft, Commented Dec 2, 2019 at 17:12
See Angular: How to dynamically add FormControl to FormArray on button click — Christopher Peisert
– Christopher Peisert, Commented Dec 2, 2019 at 18:58

spierala · Accepted Answer · 2019-12-02 21:25:09Z

I adjusted your example a bit: https://stackblitz.com/edit/angular-avcytw

Your dynamically added formControls are within formGroups. Therefore the most important thing is to add formGroupName to the inputs parent elements.

<div *ngIf="this.form.get('form_data')" formGroupName="form_data">
        <input type="text" formControlName="firstname" placeholder="firstname">
        <input type="text" formControlName="lastname"  placeholder="lastname">
    </div>

Also the initial form needed to be adjusted:

    this.form = this.formBuilder.group({
      data_type: ["", Validators.required],
      // form_data: new FormControl(),
      // raw_data: new FormControl()   
    });

form_data: new FormControl() and raw_data: new FormControl() caused the ngIfs to render before you add the corresponding form controls dynamically. Thats why there were errors indicating the formControls can not be found.

thenolin · Accepted Answer · 2019-12-02 17:14:08Z

0

If you're using Reactive Forms with Angular, my suggestion is to look into using a FormArray.

profileForm = this.fb.group({
  firstName: ['', Validators.required],
  lastName: [''],
  formData: this.fb.array([
    this.fb.control('')
  ])
});

Angular Documentation: https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays

answered Dec 2, 2019 at 17:14

thenolin

1,0643 gold badges11 silver badges30 bronze badges

Collectives™ on Stack Overflow

Dynamically add control to form in angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related