Dynamic for controls not appearing on form

Hi Team,

I am creating dynamic form using function -
`
createForm(): void {
const formGroups: { [key: string]: FormGroup } = {};
this.formConfig.forEach(groupConfig => {
const formGroup = this.fb.group({});
groupConfig.fields.forEach(field => {
switch (field.type) {
case 'checkbox':
formGroup.addControl(field.id.toString(), this.fb.control(false));
break;
case 'combo':
formGroup.addControl(field.id.toString(), this.fb.control(null, field.additionalField?.isRequired ? Validators.required : null));
break;
default:
formGroup.addControl(field.id.toString(), this.fb.control(''));
}
});
formGroups[groupConfig.groupName] = formGroup;
});
this.form = this.fb.group(formGroups);
}

`
This seems creating form , But this is not displaying control on page. Until I click some random button. Once I click any button or place then it starts showing the form content.
Please help.