fix(datepicker): use disabled state from FormControl (#7514)

Author: mmalerba

src/demo-app/datepicker/datepicker-demo.html

@@ -94,14 +94,30 @@ <h2>Input disabled datepicker</h2>
   </mat-form-field>
 </p>
 
-<h2>Input disabled, datepicker popup enabled</h2>
+<h2>Input disabled via FormControl</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker2"></mat-datepicker-toggle>
   <mat-form-field>
-    <input matInput disabled [matDatepicker]="datePicker2" [(ngModel)]="date" [min]="minDate"
+    <input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate"
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null"
+           placeholder="FormControl disabled">
+    <mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt"
+                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
+  </mat-form-field>
+
+  <button mat-button (click)="dateCtrl.disabled ? dateCtrl.enable() : dateCtrl.disable()">
+    {{dateCtrl.disabled ? 'Enable' : 'Disable'}} FormControl
+  </button>
+</p>
+
+<h2>Input disabled, datepicker popup enabled</h2>
+<p>
+  <mat-datepicker-toggle [for]="datePicker3"></mat-datepicker-toggle>
+  <mat-form-field>
+    <input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate"
            [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null"
            placeholder="Input disabled, datepicker enabled">
-    <mat-datepicker #datePicker2 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
+    <mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>

src/demo-app/datepicker/datepicker-demo.ts

@@ -1,5 +1,6 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {MatDatepickerInputEvent} from '@angular/material';
+import {FormControl} from '@angular/forms';
+import {MatDatepickerInputEvent} from '@angular/material/datepicker';
 
 
 @Component({
@@ -26,4 +27,6 @@ export class DatepickerDemo {
 
   onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
   onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
+
+  dateCtrl = new FormControl();
 }

src/lib/datepicker/datepicker-input.ts

@@ -147,7 +147,7 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
 
   /** Whether the datepicker-input is disabled. */
   @Input()
-  get disabled() { return this._disabled; }
+  get disabled() { return !!this._disabled; }
   set disabled(value: any) {
     const newValue = coerceBooleanProperty(value);
 
@@ -289,7 +289,7 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
 
   // Implemented as part of ControlValueAccessor
   setDisabledState(disabled: boolean): void {
-    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', disabled);
+    this.disabled = disabled;
   }
 
   _onKeydown(event: KeyboardEvent) {

src/lib/datepicker/datepicker-toggle.ts

@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
+  AfterContentInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -16,12 +18,11 @@ import {
   SimpleChanges,
   ViewEncapsulation,
 } from '@angular/core';
-import {MatDatepicker} from './datepicker';
-import {MatDatepickerIntl} from './datepicker-intl';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Subscription} from 'rxjs/Subscription';
 import {merge} from 'rxjs/observable/merge';
 import {of as observableOf} from 'rxjs/observable/of';
+import {Subscription} from 'rxjs/Subscription';
+import {MatDatepicker} from './datepicker';
+import {MatDatepickerIntl} from './datepicker-intl';
 
 
 @Component({
@@ -35,7 +36,7 @@ import {of as observableOf} from 'rxjs/observable/of';
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatDatepickerToggle<D> implements OnChanges, OnDestroy {
+export class MatDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
   private _stateChanges = Subscription.EMPTY;
 
   /** Datepicker instance that the button will toggle. */
@@ -44,39 +45,43 @@ export class MatDatepickerToggle<D> implements OnChanges, OnDestroy {
   /** Whether the toggle button is disabled. */
   @Input()
   get disabled(): boolean {
-    return this._disabled === undefined ? this.datepicker.disabled : this._disabled;
+    return this._disabled === undefined ? this.datepicker.disabled : !!this._disabled;
   }
-  set disabled(value) {
+  set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
   }
   private _disabled: boolean;
 
-  constructor(
-    public _intl: MatDatepickerIntl,
-    private _changeDetectorRef: ChangeDetectorRef) {}
+  constructor(public _intl: MatDatepickerIntl, private _changeDetectorRef: ChangeDetectorRef) {}
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.datepicker) {
-      const datepicker: MatDatepicker<D> = changes.datepicker.currentValue;
-      const datepickerDisabled = datepicker ? datepicker._disabledChange : observableOf();
-      const inputDisabled = datepicker && datepicker._datepickerInput ?
-        datepicker._datepickerInput._disabledChange :
-        observableOf();
-
-      this._stateChanges.unsubscribe();
-      this._stateChanges = merge(this._intl.changes, datepickerDisabled, inputDisabled)
-        .subscribe(() => this._changeDetectorRef.markForCheck());
+      this._watchStateChanges();
     }
   }
 
   ngOnDestroy() {
     this._stateChanges.unsubscribe();
   }
 
+  ngAfterContentInit() {
+    this._watchStateChanges();
+  }
+
   _open(event: Event): void {
     if (this.datepicker && !this.disabled) {
       this.datepicker.open();
       event.stopPropagation();
     }
   }
+
+  private _watchStateChanges() {
+    const datepickerDisabled = this.datepicker ? this.datepicker._disabledChange : observableOf();
+    const inputDisabled = this.datepicker && this.datepicker._datepickerInput ?
+        this.datepicker._datepickerInput._disabledChange : observableOf();
+
+    this._stateChanges.unsubscribe();
+    this._stateChanges = merge(this._intl.changes, datepickerDisabled, inputDisabled)
+        .subscribe(() => this._changeDetectorRef.markForCheck());
+  }
 }

src/lib/datepicker/datepicker.spec.ts

@@ -25,6 +25,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatInputModule} from '../input/index';
 import {MatDatepicker} from './datepicker';
 import {MatDatepickerInput} from './datepicker-input';
+import {MatDatepickerToggle} from './datepicker-toggle';
 import {MatDatepickerIntl, MatDatepickerModule} from './index';
 
 
@@ -539,6 +540,15 @@ describe('MatDatepicker', () => {
 
         expect(inputEl.disabled).toBe(true);
       });
+
+      it('should disable toggle when form control disabled', () => {
+        expect(testComponent.datepickerToggle.disabled).toBe(false);
+
+        testComponent.formControl.disable();
+        fixture.detectChanges();
+
+        expect(testComponent.datepickerToggle.disabled).toBe(true);
+      });
     });
 
     describe('datepicker with mat-datepicker-toggle', () => {
@@ -582,7 +592,7 @@ describe('MatDatepicker', () => {
       });
 
       it('should not open calendar when toggle clicked if input is disabled', () => {
-        expect(testComponent.datepicker.disabled).toBeUndefined();
+        expect(testComponent.datepicker.disabled).toBe(false);
 
         testComponent.input.disabled = true;
         fixture.detectChanges();
@@ -1120,13 +1130,15 @@ class DatepickerWithNgModel {
 @Component({
   template: `
     <input [formControl]="formControl" [matDatepicker]="d">
+    <mat-datepicker-toggle [for]="d"></mat-datepicker-toggle>
     <mat-datepicker #d></mat-datepicker>
   `,
 })
 class DatepickerWithFormControl {
   formControl = new FormControl();
   @ViewChild('d') datepicker: MatDatepicker<Date>;
   @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput<Date>;
+  @ViewChild(MatDatepickerToggle) datepickerToggle: MatDatepickerToggle<Date>;
 }
 
 

src/lib/datepicker/datepicker.ts

@@ -149,7 +149,7 @@ export class MatDatepicker<D> implements OnDestroy {
   @Input()
   get disabled() {
     return this._disabled === undefined && this._datepickerInput ?
-        this._datepickerInput.disabled : this._disabled;
+        this._datepickerInput.disabled : !!this._disabled;
   }
   set disabled(value: any) {
     const newValue = coerceBooleanProperty(value);