Ng-bootstrap: ngbDatepicker (change) is not behaving as expected

[fletz]

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

[pkozlowski-opensource]

See previous discussion in https://github.com/ng-bootstrap/ng-bootstrap/issues/1225 and more specifically the design doc: https://github.com/ng-bootstrap/ng-bootstrap/issues/1225#issuecomment-274773605

[ticxx]

Hello,
we need this feature too. After selecting the date in the popup, the date changes, and it should be possible to use the change event or the select event. The whole thing has nothing to do with validation but allows further applications.
thanks for any help

[pkozlowski-opensource]

@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.