Activities of "Scriptman"

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?