From 52aa71584f652601aa3c5cb1c1fb737cdd856c91 Mon Sep 17 00:00:00 2001 From: mmalerba Date: Thu, 12 Jan 2017 13:24:06 -0800 Subject: [PATCH] fix(input): fix placeholder for number input with bad input. (#2362) * fix(input): fix placeholder for number input with bad input. * addressed comments * add comment --- src/lib/input/input-container.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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;