重置FormGroup后HTML中Model属性绑定显示空白问题

场景 #

点击编辑按钮时调用pushAppointmentData方法重置FormGroup并填充数据，但部分字段无法正常显示。

TS代码 #

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); //每次这里都能正常输出数据  
      this.customersLoadAppointmentModel.loadId = loadData?.customersBooksLoadID;
      this.customersLoadAppointmentModel.customersLoadOriginID = loadData?.id;      
      this.customersLoadAppointmentModel.xyz = loadData?.customersBooksLoadID;
      this.ref.detectChanges();
    }    
  }

HTML代码 #

<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"> <!-- pushAppointmentData后数据未填充 -->
                        <input type="hidden"
                        formControlName="xyz"
                        [(ngModel)]="customersLoadAppointmentModel.xyz"> <!-- pushAppointmentData后数据未填充 -->
                        <input type="hidden"
                        formControlName="customersLoadOriginID" [(ngModel)]="customersLoadAppointmentModel.customersLoadOriginID"> <!-- 每次点击pushAppointmentData时数据正常显示 -->
                     </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>

问题现象 #

• formControlName="customersLoadOriginID"的输入框能正常更新数据；
• formControlName="loadId"和formControlName="xyz"的输入框显示null，无法填充数据；
• TS中通过console.log能正常获取到对应的数据（如loadData?.customersBooksLoadID或responseAppointment?.loadID）。

截图说明 #

• 截图1：表单中loadId和xyz字段显示为null，customersLoadOriginID字段有正常数据；
• 截图2：控制台中customersBooksLoadID能正常输出有效数据。

内容的提问来源于stack exchange，提问作者namco