Create form Builder object dynamically angular

Question

Is there any way to create just formbuilder object.

Currently I have 5 controls in my form. For that I am using reactive form.

But there might be scenario where only 4 controls are required. Meta data I am getting from server.

currently I am creating formbuilder group like this:

 this.inqDialogForm = this.fb.group({
      account: ['', Validators.required],
      reportingccy: ['',Validators.required],
      adjustedThru: ['',Validators.required],
      asof: ['',Validators.required],
      asofDate: ['',Validators.required]
    });

I want to create it such a way that if in response i am getting 4 fields I create validations for 4 only.

Sample of my response:

{
    "dialogForm":
        [
            {
                "name": "Account"
                "label": "For *"
                "id" :
                "parentId":
                "type": "dropdown",
                "enable": false
                "visible": true
                "validation":[{"required": true}]
            },
            {
                "name": "AsOfDate"
                "label": "AsOf"
                "id" :
                "parentId": null
                "type": "dropdown",
                "enable": false
                "visible": true
                "validation":[{"required": true}]
            }
        ]
}

I already have all the controls in place and those are third party control. I dont want to create separate components for each controls and use FormArray for adding it at runtime.

I want to just loop over the response and create formbuilder.

Any suggestions will be highly appreciated.

Thanks

There is an addControl method on the formGroup..?

MikeOne
– MikeOne

2020-04-28 16:48:58 +00:00
Commented Apr 28, 2020 at 16:48 — MikeOne
– MikeOne, Commented Apr 28, 2020 at 16:48
Yes I was able to achieve this using addControl method

Amit
– Amit

2020-04-28 16:53:18 +00:00
Commented Apr 28, 2020 at 16:53 — Amit
– Amit, Commented Apr 28, 2020 at 16:53

Amit · Accepted Answer · 2020-04-29 08:44:34Z

1

I was able to acheive this using addControl method of formGroup. fControl is the array consisiting of model.

createFormGroup(){
    const formGroup: FormGroup = new FormGroup({});
    this.fcontrols.forEach((element)=>{
      let control: FormControl = new FormControl(element.name, Validators.required);
      formGroup.addControl(element.name, control);
    })
    this.inqDialogForm = formGroup;
  }

answered Apr 29, 2020 at 8:44

Amit

1,4911 gold badge17 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

Create form Builder object dynamically angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related