When I’m submitting the form, I expect all the values of all form controls across all tabs. The problem is when I click the submit button, in getting only the values of the active tab.

food-items.component.html:

  <ul ngbNav #nav="ngbNav [activeId]="1" class="nav-tabs"   l [destroyOnHide]="false">

  <br> 

  <li [ngbNavItem]="1">

   <button ngbNavLink>Main</button>           <ng-template ngbNavContent>                     <div class="card my-3 custom-border">    

       <div class="card-body d-flex">               <app-dynamic-form [form]="foodMainForm" [data]="filteredRecord"></app-dynamic-form>   

  </div> 

 </div>        

   </ng-template>  

  </li>   

  <li [ngbNavItem]="2">   

  <button ngbNavLink>Calculations</button>      `<ng-template ngbNavContent>`         <div class="card my-3 custom-border">                               <div class="card-body d-flex">             <app-dynamic-form [form]="foodAddOnForm" [data]="filteredRecord"></app-dynamic-form>                                     </div>

   </div>                                     </ng-template>                            </li>             

 </ul>

food-items.component.ts:

      export class FoodItemsComponent {
       constructor( public modal: NgbActiveModal, private addService: AddService ) {}
     @Input() form?: IForm;      @Input() data?: any;

      foodMainForm = foodMainFormConfig as IForm;
      foodAddOnForm = foodAddOnFormConfig as IForm;

      filteredRecord: any;
      ngOnInit(): void{
        this.filteredRecord = this.data;
      }

dynamic-form.component.ts:

  export class DynamicFormComponent implements OnInit {

   @Input() form?: IForm;

@Input() data?: any;

    dynamicFormGroup!: FormGroup;

        @Output() closeModal = new  EventEmitter<any>();

            constructor(private fb: FormBuilder, prijvate activeModal: NgbActiveModal, private addService: AddService) {}
              
              ngOnInit(): void {
                // Subscribe to changes in input properties
                this.addService.data$.subscribe(data => {
                  this.data = data;
                  this.setupFormGroup();
                });
                this.setupFormGroup();
              }
              
              private setupFormGroup(): void {

                if (this.form?.formControls) {
                  const formGroup: { [key: string]: any } = {};
                
                  this.form.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] || '' : '';

                
                    if (control.type === 'date') {
                      controlValue = this.formatDate(controlValue);
                    }

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

                      if (!this.data){
                        controlValue = control.value;
                      }
                      

                    formGroup[control.name] = [controlValue, controlValidators];
                  });
                
                  this.dynamicFormGroup = this.fb.group(formGroup);
                }
                this.addService.closeModal$.subscribe(() => {
                  this.activeModal.close();
                });

              }

     onSubmit(event: Event) {

     event.preventDefault();

if (this.dynamicFormGroup.valid)

      }

dynamic-form.component.html:

            div class="modal-body">
                <form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit($event)">
                    <ng-container>
                        <div class="row">
                        @for (control of form?.formControls; track control.name){   
                            <div class="{{ control.class }} mb-1">@if (['text', 'email', 'password', 'number', 'date', 'textarea'].includes(control.type)){
                                <label class="form-label" ngbTooltip="{{control.tooltip}}" tooltipClass="tooltip-sm">{{ control.label }}
                                
                                .....
                                
                                
                 @if ( form?.saveBtnTitle  != "") {
                        <button type="submit" class="btn btn-primary" [disabled]="!dynamicFormGroup.valid">{{ form?.saveBtnTitle }}</button>
                      }

I tried the destroyonhide to false to retain the values across tabs. But is not getting it on submit