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?

do you want to get the form data whenever a new input is added? And is it only an input thats added or a formgroup? — kzoeps
– kzoeps, Commented Feb 24, 2022 at 13:07
just inputs e.g: when I click on add button two inputs will be appears one for the first name and the other for lastname and so on, I think it's the same formgroup — CHAHI Saad
– CHAHI Saad, Commented Feb 24, 2022 at 13:14

Zsolt Balint · Accepted Answer · 2022-02-24 11:52:51Z

2

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.

answered Feb 24, 2022 at 11:52

Zsolt Balint

7753 silver badges6 bronze badges

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

1 Comment

CHAHI Saad Over a year ago

I never used the form arrays before, I will check that

kzoeps · Accepted Answer · 2022-02-24 13:58:07Z

1

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(''),
      })
    );
  };
}

answered Feb 24, 2022 at 13:58

kzoeps

4717 silver badges17 bronze badges

Comments

CHAHI Saad · Accepted Answer · 2022-02-24 14:30:05Z

0

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

dynamic form in angular, add fields on runtime

thank you very much

answered Feb 24, 2022 at 14:30

CHAHI Saad

3124 silver badges18 bronze badges

Collectives™ on Stack Overflow

Build Dynamic FormBuilder in Angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related