英文:
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("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;
.
答案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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论