rework validation again

Author: mmalerba

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

@@ -40,7 +40,9 @@ <h2>Result</h2>
            placeholder="Pick a date"
            (dateInput)="onDateInput($event)"
            (dateChange)="onDateChange($event)">
-    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerParse')">Not a valid date!</md-error>
+    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerParse')">
+      "{{resultPickerModel.getError('mdDatepickerParse').text}}" is not a valid date!
+    </md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMin')">Too early!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMax')">Too late!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerFilter')">Date unavailable!</md-error>

src/lib/datepicker/calendar.ts

@@ -154,7 +154,6 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
 
   /** Handles date selection in the month view. */
   _dateSelected(date: D): void {
-    console.log('date selected', date, this.selected);
     if (!this._dateAdapter.sameDate(date, this.selected)) {
       this.selectedChange.emit(date);
     }

src/lib/datepicker/datepicker-input.ts

@@ -119,6 +119,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
     if (value != null && !this._dateAdapter.isDateInstance(value)) {
       throw Error('Datepicker: value not recognized as a date object by DateAdapter.');
     }
+    this._lastValueValid = !value || this._dateAdapter.isValid(value);
     value = this._getValidDateOrNull(value);
 
     let oldDate = this.value;
@@ -133,7 +134,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   @Input()
   get min(): D | null { return this._min; }
   set min(value: D | null) {
-    this._min = this._getValidDateOrNull(value);
+    this._min = value;
     this._validatorOnChange();
   }
   private _min: D | null;
@@ -142,7 +143,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   @Input()
   get max(): D | null { return this._max; }
   set max(value: D | null) {
-    this._max = this._getValidDateOrNull(value);
+    this._max = value;
     this._validatorOnChange();
   }
   private _max: D | null;
@@ -173,9 +174,9 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   private _datepickerSubscription: Subscription;
 
   /** The form control validator for whether the input parses. */
-  private _parseValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    return (!control.value || this._dateAdapter.isValid(control.value)) ?
-        null : {'mdDatepickerParse': true};
+  private _parseValidator: ValidatorFn = (): ValidationErrors | null => {
+    return this._lastValueValid ?
+        null : {'mdDatepickerParse': {'text': this._elementRef.nativeElement.value}};
   }
 
   /** The form control validator for the min date. */
@@ -203,6 +204,9 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
       Validators.compose(
           [this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator]);
 
+  /** Whether the last value set on the input was valid. */
+  private _lastValueValid = false;
+
   constructor(
       private _elementRef: ElementRef,
       private _renderer: Renderer2,
@@ -280,6 +284,8 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   _onInput(value: string) {
     let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
+    this._lastValueValid = !date || this._dateAdapter.isValid(date);
+    date = this._getValidDateOrNull(date);
     this._cvaOnChange(date);
     this._valueChange.emit(date);
     this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement));

src/lib/datepicker/datepicker.ts

@@ -129,7 +129,7 @@ export class MdDatepicker<D> implements OnDestroy {
     // selected value is.
     return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null);
   }
-  set startAt(date: D | null) { this._startAt = this._getValidDateOrNull(date); }
+  set startAt(date: D | null) { this._startAt = date; }
   private _startAt: D | null;
 
   /** The view that the calendar should start in. */
@@ -165,7 +165,7 @@ export class MdDatepicker<D> implements OnDestroy {
 
   /** The currently selected date. */
   get _selected(): D | null { return this._validSelected; }
-  set _selected(value: D | null) { this._validSelected = this._getValidDateOrNull(value); }
+  set _selected(value: D | null) { this._validSelected = value; }
   private _validSelected: D | null = null;
 
   /** The minimum selectable date. */
@@ -347,12 +347,4 @@ export class MdDatepicker<D> implements OnDestroy {
         { overlayX: 'end', overlayY: 'bottom' }
       );
   }
-
-  /**
-   * @param obj The object to check.
-   * @returns The given object if it is both a date instance and valid, otherwise null.
-   */
-  private _getValidDateOrNull(obj: any): D | null {
-    return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-  }
 }