ngbDatepicker (change) is not behaving as expected

Bug description:

The (change) event on an input with ngbDatepicker is currently called when (blur) is called. Which makes no sense, because that’s what (blur) is for. Also (change) AND (blur) are both NOT called when the date is changed via the pop up date picker (which makes sense for blur, but not for change).

Why I think this is a problem: (change) should reflect any changes in the control. So if I type something this changed the value. If the value is now invalid, the change is that it is now invalid. If it’s still valid, because I did change one number in a valid date, resulting in a new valid date, that’s a change as well. Also if the date is changed via the popup, it should also trigger a changed event.

As to why I think it should correctly reflect change: Because you can build dynamic forms upon that feature. If you change the date I change the form. But if you need to click outside of the control to make those changes happen, that’s very bad UI design.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.1.2

ng-bootstrap: 1.0.0-beta.8

1 possible answer(s) on “ngbDatepicker (change) is not behaving as expected

  1. @fletz there are few things to clarify here:

    The (change) event on an input with ngbDatepicker is currently called when (blur) is called. Which makes no sense, because that’s what (blur) is for.

    This has absolutely nothing to do with the this library or even Angular – the change event is only called when the value is fully entered / committed by the user:

    fired for <input>, <select>, and <textarea> elements when a change to the element’s value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element’s value.

    Source: https://developer.mozilla.org/en-US/docs/Web/Events/change

    change and blur are 2 different things – one can blur a control without changing the value!

    Why I think this is a problem: (change) should reflect any changes in the control. So if I type something this changed the value. If the value is now invalid, the change is that it is now invalid. If it’s still valid, because I did change one number in a valid date, resulting in a new valid date, that’s a change as well. Also if the date is changed via the popup, it should also trigger a changed event.

    I think that you are looking for the (ngModelChange) event which fires every time model associated with the control changes. You can see it in action here: https://stackblitz.com/edit/angular-uehtxr?file=app%%2Fdatepicker-popup.html

    Alternatively you can listen to the:

    • DOM’s (input) event to be notified when a users is entering something in the input field;
    • datepicker’s dateSelect event to be notified when a date is selected from a popup.

    @ticxx I think that the above covers your use-case too.

    I’m going to close this one as a support request, please feel free to open new issue with a minimal reproduce scenario if you’ve got use-cases that are still not covered.