My form for a food item is span across 2 tabs. Both tabs contain 2 different forms built using json configs which are merged later on. The problem is after I click save and the backend validations run returning an error message if any, all the checkboxes on both tabs are checked even if I have not checked them.

@Input() data?: any;
foodMainCourseForm = foodMainCourseForm as IForm;
foodAddOnsForm = foodAddOnsForm as IForm;
dynamicMainCourseForm!: FormGroup;
dynamicAddOnForm!: FormGroup;

ngOnInit(): void {
this.filteredRecord = this.data;
this.addService.data$.subscribe(data => {
    this.data = data;
    this.dynamicMainCourseForm = this.setupFormGroup(this.foodMainCourseForm);
    this.dynamicAddOnForm = this.setupFormGroup(this.foodAddOnsForm);
});

this.dynamicMainCourseForm = this.setupFormGroup(this.foodMainCourseForm);
this.dynamicAddOnForm = this.setupFormGroup(this.foodAddOnsForm);

}

private setupFormGroup(formConfig: IForm): FormGroup {
console.log('formConfig', formConfig);
const formGroup: { [key: string]: any } = {};

if (formConfig?.formControls) {
    formConfig.formControls.forEach((control: IFormControl) => {
        const controlValidators: any = [];

        if (control.validators) {
            control.validators.forEach((val: IValidator) => {
                if (val.validatorName === 'required') controlValidators.push(Validators.required);
                if (val.validatorName === 'email') controlValidators.push(Validators.email);
                if (val.validatorName === 'minlength') controlValidators.push(Validators.minLength(val.minLength as number));
                if (val.validatorName === 'maxlength') controlValidators.push(Validators.maxLength(val.maxLength as number));
                if (val.validatorName === 'pattern') controlValidators.push(Validators.pattern(val.pattern as string));
                if (val.validatorName === 'greaterThan') {
                    controlValidators.push(this.greaterThanValidator(val.greaterThan as string));
                }
            });
        }

        let controlValue: any = this.data ? this.data[control.name] || '' : null;

        if (control.type === 'checkbox') {
            controlValue = controlValue === 'T';
        }

        // when doing Add
        if (!this.data) {
            if (control.type === 'checkbox' || control.type === 'text' || control.type === 'dropdown') {
                controlValue = control.value;
                console.log('control.value', control.value);
            }
        }

        formGroup[control.name] = [controlValue, controlValidators];
    });
}

return this.fb.group(formGroup);

}

onSubmit(event: Event) {
event.preventDefault();

// Merge form groups
this.dynamicFoodMainForm = this.mergeFormGroups();

if (this.dynamicFoodMainForm.valid) {
    for (const controlName of Object.keys(this.dynamicFoodMainForm.controls)) {
        const control = this.dynamicFoodMainForm.get(controlName);
        if (control instanceof FormControl && typeof control.value === 'boolean') {
            control.setValue(control.value ? 'T' : 'F');
        }
    }

    // Emit service events
    if (this.data) {
        const updatedRowData = { ...this.data, ...this.dynamicFoodMainForm.value };
        if (this.form?.editFormTitle) {
            this.addService.emitEdit(updatedRowData);
        } else {
            this.addService.emitEditData(updatedRowData);
        }
    } else {
        this.addService.emitAdd(this.dynamicFoodMainForm.value);
        console.log(this.activeModal);
    }

html part for checkboxes

 @else if (control.type == "checkbox"){
                      <label class="form-label"  ngbTooltip="{{control.tooltip}}" tooltipClass="tooltip-sm">{{ control.label }}</label>
                      @if(control.disabledControls){
                        <input formControlName="{{ control.name }}" class="{{ control.class }}" type="checkbox" (change)="onCheckboxChange($event, control)">
                      }
                      @else {
                        <input formControlName="{{ control.name }}" class="{{ control.class }}" type="checkbox" [checked]="control.value === 'T'" [disabled]="true">
                      }

How do I tackle this issue please? Im using angular 17