ngbDatePicker is only capturing the previous value when [ngModelOptions]="{ updateOn: 'blur' }"

[ahmadakra]

Bug description:

Consider this standard snippet of code:

    <div class="input-group" *ngIf="isEdit">
      <input class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker #d="ngbDatepicker" [(ngModel)]="model.BirthDateTime" [ngModelOptions]="{ updateOn: 'blur' }">
      <button class="btn btn-primary" (click)="d.toggle()" type="button">
        <fa-icon icon="calendar-alt"></fa-icon>
      </button>
    </div>

It creates a datepicker inside a popup, this is what it looks like with my custom styling:

When you set the following option: [ngModelOptions]="{ updateOn: 'blur' }", ngbDatepicker does not behave correctly when you select a date from the popup, the value of the model is not the latest value you select, but the previous one selected just before it. And the slightly sinister part is that the latest value you just selected appears correctly in the input field as you would expect, so you would have no clue that the value of the model underneath is different.

Upon investigation it seems to be an issue with how ngbDatepicker implements ControlValueAccessor. When you select a date from inside the popup, ngbDatepicker fires the "touched" event BEFORE it fires the "change" event, and therefore upon the "touched" event angular updates the model to the old value before the new value has been captured with the "change" event. If that makes sense.

Versions:

Angular: 7.0.0

ng-bootstrap: 4.0.1

Bootstrap: 4.2.1

[maxokorokov]

Could you please provide a stackblitz with the minimal reproduction scenario?
You could fork this one, for example: https://ng-bootstrap.github.io/#/components/datepicker/examples#popup

[ahmadakra]

@maxokorokov here you go:
https://stackblitz.com/edit/angular-3pwuvv

I literally just added [ngModelOptions]="{ updateOn: 'blur' }" in the sample you referenced.
Best wishes,