Base solution for your next web application
Open Closed

Date field flickers (doesn't update properly) if forced to update programmatically rather than directly by the user #10186


User avatar
0
Scriptman created

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)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Could you try using (dateChange) event as we do here instead of using abp.event.* ?

  • User Avatar
    0
    Scriptman created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    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,

  • User Avatar
    0
    Scriptman created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @Scriptman

    Thanks, we have received your email. We will test the problem and provide a fix.

  • User Avatar
    0
    Scriptman created

    Hi @ismcagdas, Were you able to reproduce the problem?

    Hi @ismcagdas, I've resent the demo project to you.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @Scriptman

    I think our team lost access to your project, could you send it again ?

    Thanks,

  • User Avatar
    0
    Scriptman created

    Hi @ismcagdas, I've sent this demo project to [email protected] again.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Please follow https://github.com/aspnetzero/aspnet-zero-core/issues/4391. We will try to provide a solution as soon as possible.