FormGroup model property binding is showing blank on html after reset

Question

I've been trying to reset the FormGroup on edit button of pushAppointmentData, here is the code on ts page.

pushAppointmentData(loadData: any) {
    this.customersLoadAppointmentModel.registerForm.reset();
    if(loadData.hasOwnProperty("appointmentData")){
      const responseAppointment = loadData.appointmentData;
      this.customersLoadAppointmentModel.ID = responseAppointment?.id;
      this.customersLoadAppointmentModel.loadId = responseAppointment?.loadID;
      this.customersLoadAppointmentModel.xyz = responseAppointment?.loadID;
      this.customersLoadAppointmentModel.customersLoadOriginID = responseAppointment?.customersLoadOriginID;
      this.ref.detectChanges();
    }
    else{
      console.log(loadData?.customersBooksLoadID); //data is shown here everytime  
      this.customersLoadAppointmentModel.loadId = loadData?.customersBooksLoadID;
      this.customersLoadAppointmentModel.customersLoadOriginID = loadData?.id;      
      this.customersLoadAppointmentModel.xyz = loadData?.customersBooksLoadID;
      this.ref.detectChanges();
    }    
  }

here is html page.

<table class="table table-condensed">
   <tbody>
      <tr>
         <td class="border-0 p-0 text-right"><b>Appt. Required:
            </b> 
         </td>
         <td class="border-0 pl-3 pt-0 pb-0 pt-0">
            Yes
            <a href="" data-toggle="modal"
               data-target="#Appointment"
               (click)="pushAppointmentData(loadData)">
            <i
               class="float-right text-primary mr-2 flaticon2-edit">
            </i></a>
            <!-- Modal-->
            <div class="modal fade" id="Appointment" tabindex="-1"
               role="dialog" aria-labelledby="Appointment"
               aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg"
               role="document">
               <div class="modal-content"
                  [formGroup]="customersLoadAppointmentModel.registerForm">
                  <div class="modal-body">
                     <div class="row pt-3 pb-3 bg-light0">
                        <input type="hidden"
                        formControlName="ID"
                        [(ngModel)]="customersLoadAppointmentModel.ID">
                        <input type="hidden"
                        formControlName="loadId"
                        [(ngModel)]="customersLoadAppointmentModel.loadId"> //data does not fill after pushAppointmentData
                        <input type="hidden"
                        formControlName="xyz"
                        [(ngModel)]="customersLoadAppointmentModel.xyz"> //data does not fill after pushAppointmentData
                        <input type="hidden"
                        formControlName="customersLoadOriginID" [(ngModel)]="customersLoadAppointmentModel.customersLoadOriginID"> //data shows here everytime when pushAppointmentData is clicked.
                     </div>
                  </div>
               </div>
            </div>
            <!-- modal -->
         </td>
      </tr>
      <tr>
         <td class="border-0 p-0 text-right"><b> Pickup Date : </b>
         </td>
         <td class="border-0 pl-3 pt-0 pb-0 pt-0">
            {{loadData.appointmentData?.pickupDate}} 
         </td>
      </tr>          
   </tbody>
</table>

this formControlName="customersLoadOriginID" gets updated everytime on pushAppointmentData but formControlName="loadID" and formControlName="xyz" does not get updated shows null but still gets data on ts page here console.log(loadData?.customersBooksLoadID); or responseAppointment?.loadID;.

Here is first screenshot. Here is second screenshot.

Answer 1

Found a solution to this problem, used the form reset passing value with property.

      this.customersLoadAppointmentModel.registerForm.reset({
        loadId: loadData?.customersBooksLoadID
      });
      this.ref.detectChanges();

This stopped the problem altogether getting blank value in the HTML. I was passing just this.customersLoadAppointmentModel.registerForm.reset(); I guess this is a Form issue which are dynamic in nature.