Update example to a reactive form.

Fix error when setting value to null.

Author: Thomas Plessis

bundles/ng2-datepicker.umd.js

@@ -1,20 +1,24 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { CommonModule } from '@angular/common';
-import { AppComponent } from './app.component';
-import { AppHomeComponent } from './components/app-home';
-import { NgDatepickerModule } from './ng-datepicker';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {CommonModule} from '@angular/common';
+import {AppComponent} from './app.component';
+import {AppHomeComponent} from './components/app-home';
+import {NgDatepickerModule} from './ng-datepicker';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    AppHomeComponent
-  ],
-  imports: [
-    BrowserModule,
-    CommonModule,
-    NgDatepickerModule
-  ],
-  bootstrap: [ AppComponent ]
+    declarations: [
+        AppComponent,
+        AppHomeComponent
+    ],
+    imports: [
+        BrowserModule,
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        NgDatepickerModule
+    ],
+    bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

bundles/ng2-datepicker.umd.js.map

@@ -7,7 +7,10 @@
     </div>
     <div class="column is-6 is-offset-3">
       <div class="datepicker-container">
-        <ng-datepicker [(ngModel)]="date" [options]="options"></ng-datepicker>
+        <form [formGroup]="form">
+          <ng-datepicker formControlName="date" [options]="options"></ng-datepicker>
+          <button (click)="onReset()">Reset form</button>
+        </form>
       </div>
     </div>
   </div>

src/app.module.ts

@@ -1,18 +1,26 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {DatepickerOptions} from '../../ng-datepicker/ng-datepicker.component';
 import * as enLocale from 'date-fns/locale/en';
 import * as frLocale from 'date-fns/locale/fr';
+import {FormBuilder} from "@angular/forms";
 
 @Component({
-  selector: 'app-home',
-  templateUrl: 'app-home.component.html'
+    selector: 'app-home',
+    templateUrl: 'app-home.component.html'
 })
 export class AppHomeComponent {
-  date: Date;
-  options: DatepickerOptions = {
-    locale: enLocale
-  };
-  constructor() {
-    this.date = new Date();
-  }
+    date: Date;
+    options: DatepickerOptions = {
+        locale: enLocale
+    };
+
+    form = this.fb.group({
+        date: ['']
+    });
+
+    constructor(private fb: FormBuilder) {}
+
+    onReset() {
+        this.form.reset();
+    }
 }

src/components/app-home/app-home.component.html

@@ -269,8 +269,12 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh
       this.date = val;
       this.innerValue = val;
       this.init();
-        this.displayValue = this.innerValue ? format(this.innerValue, this.displayFormat, this.locale) : '';
+      this.displayValue = this.innerValue ? format(this.innerValue, this.displayFormat, this.locale) : '';
       this.barTitle = format(startOfMonth(val), this.barTitleFormat, this.locale);
+    } else {
+      this.date = new Date();
+      this.innerValue = val;
+      this.init();
     }
   }