How to prevent bsValueChange from firing on page load in angular?

Question

I have been using ngx-bootstrap's datepicker to listen for an onchange event so that I could fetch data whenever the user changes the date from input.

Everything works fine except for the fact bsValueChange fires initially on page load which returns an Unhandled rejection SequelizeDatabaseError: invalid input syntax for type date: "Invalid Date".

Here is my datepicker code block

<input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue" [bsConfig]="{ rangeInputFormat: 'MM/DD/YYYY' }"
  (bsValueChange)="onValueChange($event)">

I have looked into this github issue as well but this is not working for me either as ngModelChange doesn't work anymore.

I only want bsValueChange to fire once when the entire page has loaded.

Answer 1

use onHidden event instead of bsvalueChange