ngbDatepicker in reactive form gives old value on ngModelChange

<!DOCTYPE html>
<html>

  <head>
  <base href="." />
    <title>ng-bootstrap demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://unpkg.com/core-js@^2.4.1/client/shim.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.10/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.10/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@^0.1.8/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@^0.19.40/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app').catch(console.error.bind(console));
</script>
  </head>

  <body>
  <my-app>loading...</my-app>
  </body>

</html>

var ver = {
    ng: '5.2.0'
  };
  
  System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {

    'app': './src',

    '@angular/core': 'npm:@angular/core@' + ver.ng + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@' + ver.ng + '/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@' + ver.ng + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@' + ver.ng + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ver.ng + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@' + ver.ng + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router@' + ver.ng + '/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@' + ver.ng + '/bundles/forms.umd.js',

    'rxjs': 'npm:rxjs@^5.0.1',
    'typescript': 'npm:typescript@2.1.5/lib/typescript.js',

    '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-beta.9/bundles/ng-bootstrap.js'
  },
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule);


import { Component, NgModule, Input, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid">
    
    <hr>
    <p>
      This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap.
      Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
    </p>
    <hr>

    <form class="form-inline" [formGroup]="testForm">
     <div class="input-group">
        <div class="input-group-prepend">
           <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
              <i class="fa fa-calendar"></i>
           </button>
        </div>
        <input class="form-control"
         name="dp" formControlName="date" ngbDatepicker #d="ngbDatepicker" (ngModelChange)="dateChanged()">
         </div>
  </form>
  </div>
  `
})
export class App implements OnInit {
  public testForm: FormGroup

  ngOnInit() {
    this.testForm = new FormGroup({
      'date': new FormControl(null, [Validators.required])
    })
  }
 
  dateChanged() {
    let dateField = this.testForm.get('date')
    if (dateField.valid) {
      console.log('Date field is valid')
    } else {
      console.log('Date field is invalid')
    }
    console.log('Date field value: ', dateField.value)
  }
}   

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule, JsonpModule, NgbModule.forRoot()], 
  declarations: [App]
  bootstrap: [App]
}) 
export class AppModule {
}

import {Component, Input} from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'ngbd-datepicker-customday',
  templateUrl: 'src/datepicker-customday.html',
  styles: [`
    .custom-day {      
      text-align: center;
      padding: 0.185rem 0.25rem;
      border-radius: 0.25rem;
      display: inline-block;
      width: 2rem;
    }
    .custom-day:hover, .custom-day.focused {
      background-color: #e6e6e6;
    }
    .weekend {
      background-color: #f0ad4e;
      border-radius: 1rem;
      color: white;
    }
    .hidden {
      display: none;
    }
  `]
})
export class NgbdDatepickerCustomday {
  control: FormControl = new FormControl();

  isWeekend(date: NgbDateStruct) {
    const d = new Date(date.year, date.month - 1, date.day);
    return d.getDay() === 0 || d.getDay() === 6;
  }

  isDisabled(date: NgbDateStruct, current: {month: number}) {
    return date.month !== current.month;
  }
  
  pickDate(date: NgbDateStruct, event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    
    this.control.patchValue(date);
  }
}

<p>This datepicker uses a custom template to display days. All week-ends are displayed with an orange background.</p>

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input 
        class="form-control" 
        placeholder="yyyy-mm-dd"
        name="dp" 
        [formControl]="control" 
        ngbDatepicker 
        [dayTemplate]="customDay" 
        [markDisabled]="isDisabled" 
        #d="ngbDatepicker"
      >
      <button class="input-group-addon" (click)="d.toggle()" type="button">
        <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
      </button>
    </div>
  </div>
</form>

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
  <span 
    class="custom-day" 
    [class.weekend]="isWeekend(date)" 
    [class.focused]="focused"
    [class.bg-primary]="selected" 
    [class.hidden]="date.month !== currentMonth"
    [class.text-muted]="disabled"
    (click)="pickDate(date, $event)"
  >
    {{ date.day }}
  </span>
</ng-template>