API: v9.0.1.0 | Client: v9.0.1.0, Angular, .net core, Theme 2 (fluid layout=true, fixedheader=false, headertype=topbar)
If the form field campaign.goLiveMilestoneDate is changed by the user I want the form field campaign.effectiveGoLiveDate to be set to the same value. I've tried a few different methods to get this to work, but in all of the cases I've tried I end up with the same problem. The problem is that the form field campaign.effectiveGoLiveDate doesn't update completely - it ends up flickering between multiple states, including its original state and the new state. This happens in both Chrome and Firefox.
This is my current attempt, where I've tried to use the abp event trigger to push the new date value to effectiveGoLiveDate, but I get the same result:
HTML:
<label>{{l("GoLiveMilestoneDate")}} \*</label><input required="" class="form-control m-input" type="datetime" datepickermomentmodifier="" id="Campaign_GoLiveMilestoneDate" name="Campaign_GoLiveMilestoneDate"><br>
<br>
<p-accordion>
<p-accordionTab header="Effective Date">
<div class="form-group">
<label for="Campaign_EffectiveGoLiveDate">{{l("EffectiveGoLiveDate")}}</label>
<input required class="form-control m-input" type="datetime" bsDatepicker datePickerMomentModifier [(date)]="campaign.effectiveGoLiveDate" id="Campaign_EffectiveGoLiveDate" name="Campaign_EffectiveGoLiveDate" [@openClose]="highlightEffectiveDateOnChange ? 'open' : 'closed'">
</div>
</p-accordionTab>
</p-accordion>
TS:
ngOnInit(): void {
this.subDateChange();
this.show(this._activatedRoute.snapshot.queryParams['id']);
}
onChange() {
abp.event.trigger('app.campaigns.goLiveMilestoneDate.onDateChange', this.campaign.goLiveMilestoneDate);
}
subDateChange() {
abp.event.on('app.campaigns.goLiveMilestoneDate.onDateChange', this.onDateChange);
}
unSubDateChange() {
abp.event.off('app.campaigns.goLiveMilestoneDate.onDateChange', this.onDateChange);
}
ngOnDestroy(): void {
this.unSubDateChange();
}
onDateChange = (dateChange) => {
if (!dateChange || (this.campaign.effectiveGoLiveDate === dateChange)) {
return;
}
this.campaign.effectiveGoLiveDate = dateChange;
}
What is the canonical way to use Angular / ABP to set a date field to a new value within the TS file?
9 Answer(s)
-
0
Hi ismcagdas, Thanks for the quick response.
I changed the HTML to:
<input required class="form-control m-input" type="datetime" bsDatepicker datePickerMomentModifier [(date)]="campaign.goLiveMilestoneDate" id="Campaign_GoLiveMilestoneDate" name="Campaign_GoLiveMilestoneDate" (dateChange)="changeDate($event)"> <input required class="form-control m-input" type="datetime" bsDatepicker datePickerMomentModifier [(date)]="campaign.effectiveGoLiveDate" id="Campaign_EffectiveGoLiveDate" name="Campaign_EffectiveGoLiveDate" [@openClose]="highlightEffectiveDateOnChange ? 'open' : 'closed'">and the TS to:
changeDate(event) { this.campaign.effectiveGoLiveDate = event; }This has the same result unfortunately. The date that appears within the id="Campaign_EffectiveGoLiveDate" flickers between it's original default value and the new value.
-
0
Hi @Scriptman
Is it possible to share your project (or a reproduction demo project) with us via email ([email protected]) ? In that way, we can solve your problem faster.
Thanks,
-
0
Hi @ismcagdas,
I've upgraded to the latest version of asp zero hoping this issue would be resolved, but unfortunately it's still there.
I've created a demo project using the latest version that shows you this issue. This has been sent to info@ via WeTransfer. You should have received it now.
In this demo you can set Date1 to a date using the calendar pop up and then it should set Date2 to the same date. But it just sets Date2 to the same date for a moment and then Date2 reverts to null.
I tried the (dateChange) method you mentioned initially, but this behaved the same way in my production project.
Unrelatedly, I used the ASP.NET Zero Power tool to create this demo DateForm entity and it didn't insert into the app-navigation-service.ts correctly. It inserted "new AppMenuItem('DateForms', 'Pages.DateForms', 'flaticon-more', '/app/main/dateTest/dateForms')" at the top of the page, rather than within the AppMenu structure.
-
0
Hi @Scriptman
Thanks, we have received your email. We will test the problem and provide a fix.
-
0
Hi @ismcagdas, Were you able to reproduce the problem?
Hi @ismcagdas, I've resent the demo project to you.
-
0
Hi @Scriptman
I think our team lost access to your project, could you send it again ?
Thanks,
-
0
Hi @ismcagdas, I've sent this demo project to [email protected] again.
-
0
Hi,
Please follow https://github.com/aspnetzero/aspnet-zero-core/issues/4391. We will try to provide a solution as soon as possible.
