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

Amit Amit · Accepted Answer · 2020-04-29T08:44:34

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;
  }

Create form Builder object dynamically angular

1 Answers