Build Dynamic FormBuilder in Angular

Question

I have created an Angular project with Dynamic Inputs, I click on a button then new inputs create and I want to use FormBuilder to get the data but I don't know how to do this.

I know how to use FormBuilder in the static case but I didn't find any resource for dynamic.

Which are the steps to follow to achieve that?

Answer 1

How are you adding new inputs to the existing formgroup? For example you can do this by using form arrays, and basically with that you are able to gate de value from it just by accessing like: formGroup.get("formArray").value -> you will get all the inputs value by one shot.

Answer 2

Im not too sure if this is what you meant but if you wanted to add new inputs everytime user clicks button and get the value then you could try this. expanding on @ZsoltB answer working stackblitz link

@Component({
  ...all the decorator things
})
export class AppComponent {
  formArray = new FormArray([
    new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
    }),
  ]);
  name = 'angular';

  addNewInput = () => {
    this.formArray.push(
      new FormGroup({
        firstName: new FormControl(''),
        lastName: new FormControl(''),
      })
    );
  };
}

Answer 3

I solved the problem by using and inspired by the following code:

dynamic form in angular, add fields on runtime

thank you very much