diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts index 607c18690043..dbe6efecce64 100644 --- a/src/lib/input/input-container.ts +++ b/src/lib/input/input-container.ts @@ -152,7 +152,14 @@ export class MdInputDirective { */ @Output() _placeholderChange = new EventEmitter(); - get empty() { return (this.value == null || this.value === '') && !this._isNeverEmpty(); } + get empty() { + return !this._isNeverEmpty() && + (this.value == null || this.value === '') && + // Check if the input contains bad input. If so, we know that it only appears empty because + // the value failed to parse. From the user's perspective it is not empty. + // TODO(mmalerba): Add e2e test for bad input case. + !this._isBadInput(); + } private get _uid() { return this._cachedUid = this._cachedUid || `md-input-${nextUniqueId++}`; } @@ -199,6 +206,10 @@ export class MdInputDirective { private _isNeverEmpty() { return this._neverEmptyInputTypes.indexOf(this._type) !== -1; } + private _isBadInput() { + return (this._elementRef.nativeElement as HTMLInputElement).validity.badInput; + } + /** Determines if the component host is a textarea. If not recognizable it returns false. */ private _isTextarea() { let nativeElement = this._elementRef.nativeElement;