FormGroup模型属性绑定在重置后在HTML上显示为空白。

huangapple go评论66阅读模式
英文:

FormGroup model property binding is showing blank on html after reset

问题

我一直在尝试在“编辑”按钮的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 -->
            </div>
         </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"每次在pushAppointmentData上都会更新,但formControlName="loadId"formControlName="xyz"不会更新,显示为null,但仍然在ts页面上获取数据,例如console.log(loadData?.customersBooksLoadID);responseAppointment?.loadID;

英文:

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(&quot;appointmentData&quot;)){
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.

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

this formControlName=&quot;customersLoadOriginID&quot; gets updated everytime on pushAppointmentData but formControlName=&quot;loadID&quot; and formControlName=&quot;xyz&quot; 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.
FormGroup模型属性绑定在重置后在HTML上显示为空白。
Here is second screenshot.
FormGroup模型属性绑定在重置后在HTML上显示为空白。

答案1

得分: 0

找到了解决这个问题的方法,使用表单重置并传递属性值。

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

这样完全解决了在 HTML 中获取空值的问题。
之前我只传递了 this.customersLoadAppointmentModel.registerForm.reset();,我猜这是一个动态的表单问题。

英文:

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.

huangapple
  • 本文由 发表于 2023年2月6日 02:28:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/75354560.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定