@@ -25,7 +25,11 @@ import {
25
25
Self ,
26
26
ViewChild ,
27
27
ViewEncapsulation ,
28
- Inject
28
+ Inject ,
29
+ ChangeDetectionStrategy ,
30
+ OnChanges ,
31
+ OnDestroy ,
32
+ DoCheck ,
29
33
} from '@angular/core' ;
30
34
import { animate , state , style , transition , trigger } from '@angular/animations' ;
31
35
import { coerceBooleanProperty , Platform } from '../core' ;
@@ -48,6 +52,8 @@ import {
48
52
ErrorOptions ,
49
53
MD_ERROR_GLOBAL_OPTIONS
50
54
} from '../core/error/error-options' ;
55
+ import { Subject } from 'rxjs/Subject' ;
56
+ import { filter } from '../core/rxjs/index' ;
51
57
52
58
// Invalid input type. Using one of these will throw an MdInputContainerUnsupportedTypeError.
53
59
const MD_INPUT_INVALID_TYPES = [
@@ -128,53 +134,48 @@ export class MdSuffix {}
128
134
'[disabled]' : 'disabled' ,
129
135
'[required]' : 'required' ,
130
136
'[attr.aria-describedby]' : 'ariaDescribedby || null' ,
131
- '[attr.aria-invalid]' : '_isErrorState() ' ,
132
- '(blur)' : '_onBlur( )' ,
133
- '(focus)' : '_onFocus( )' ,
137
+ '[attr.aria-invalid]' : '_isErrorState' ,
138
+ '(blur)' : '_focusChanged(false )' ,
139
+ '(focus)' : '_focusChanged(true )' ,
134
140
'(input)' : '_onInput()' ,
135
141
}
136
142
} )
137
- export class MdInputDirective {
143
+ export class MdInputDirective implements OnChanges , OnDestroy , DoCheck {
138
144
139
145
/** Variables used as cache for getters and setters. */
140
146
private _type = 'text' ;
141
147
private _placeholder : string = '' ;
142
148
private _disabled = false ;
143
149
private _required = false ;
144
150
private _id : string ;
145
- private _cachedUid : string ;
151
+ private _uid = `md-input- ${ nextUniqueId ++ } ` ;
146
152
private _errorOptions : ErrorOptions ;
153
+ private _previousNativeValue = this . value ;
154
+
155
+ /** Whether the input is in an error state. */
156
+ _isErrorState = false ;
147
157
148
158
/** Whether the element is focused or not. */
149
159
focused = false ;
150
160
151
161
/** Sets the aria-describedby attribute on the input for improved a11y. */
152
162
ariaDescribedby : string ;
153
163
164
+ /** Stream that emits whenever one of the input states changes. */
165
+ _stateChanges = new Subject < void > ( ) ;
166
+
154
167
/** Whether the element is disabled. */
155
168
@Input ( )
156
- get disabled ( ) {
157
- return this . _ngControl ? this . _ngControl . disabled : this . _disabled ;
158
- }
159
-
160
- set disabled ( value : any ) {
161
- this . _disabled = coerceBooleanProperty ( value ) ;
162
- }
169
+ get disabled ( ) { return this . _ngControl ? this . _ngControl . disabled : this . _disabled ; }
170
+ set disabled ( value : any ) { this . _disabled = coerceBooleanProperty ( value ) ; }
163
171
164
172
/** Unique id of the element. */
165
173
@Input ( )
166
174
get id ( ) { return this . _id ; }
167
- set id ( value : string ) { this . _id = value || this . _uid ; }
175
+ set id ( value : string ) { this . _id = value || this . _uid ; }
168
176
169
177
/** Placeholder attribute of the element. */
170
- @Input ( )
171
- get placeholder ( ) { return this . _placeholder ; }
172
- set placeholder ( value : string ) {
173
- if ( this . _placeholder !== value ) {
174
- this . _placeholder = value ;
175
- this . _placeholderChange . emit ( this . _placeholder ) ;
176
- }
177
- }
178
+ @Input ( ) placeholder : string = '' ;
178
179
179
180
/** Whether the element is required. */
180
181
@Input ( )
@@ -203,11 +204,6 @@ export class MdInputDirective {
203
204
get value ( ) { return this . _elementRef . nativeElement . value ; }
204
205
set value ( value : string ) { this . _elementRef . nativeElement . value = value ; }
205
206
206
- /**
207
- * Emits an event when the placeholder changes so that the `md-input-container` can re-validate.
208
- */
209
- @Output ( ) _placeholderChange = new EventEmitter < string > ( ) ;
210
-
211
207
/** Whether the input is empty. */
212
208
get empty ( ) {
213
209
return ! this . _isNeverEmpty ( ) &&
@@ -218,8 +214,6 @@ export class MdInputDirective {
218
214
! this . _isBadInput ( ) ;
219
215
}
220
216
221
- private get _uid ( ) { return this . _cachedUid = this . _cachedUid || `md-input-${ nextUniqueId ++ } ` ; }
222
-
223
217
private _neverEmptyInputTypes = [
224
218
'date' ,
225
219
'datetime' ,
@@ -232,24 +226,51 @@ export class MdInputDirective {
232
226
constructor ( private _elementRef : ElementRef ,
233
227
private _renderer : Renderer2 ,
234
228
private _platform : Platform ,
229
+ private _changeDetectorRef : ChangeDetectorRef ,
235
230
@Optional ( ) @Self ( ) public _ngControl : NgControl ,
236
231
@Optional ( ) private _parentForm : NgForm ,
237
232
@Optional ( ) private _parentFormGroup : FormGroupDirective ,
238
233
@Optional ( ) @Inject ( MD_ERROR_GLOBAL_OPTIONS ) errorOptions : ErrorOptions ) {
239
234
240
235
// Force setter to be called in case id was not specified.
241
236
this . id = this . id ;
242
-
243
237
this . _errorOptions = errorOptions ? errorOptions : { } ;
244
238
this . errorStateMatcher = this . _errorOptions . errorStateMatcher || defaultErrorStateMatcher ;
245
239
}
246
240
247
- /** Focuses the input element. */
248
- focus ( ) { this . _elementRef . nativeElement . focus ( ) ; }
241
+ ngOnChanges ( ) {
242
+ this . _stateChanges . next ( ) ;
243
+ }
249
244
250
- _onFocus ( ) { this . focused = true ; }
245
+ ngOnDestroy ( ) {
246
+ this . _stateChanges . complete ( ) ;
247
+ }
251
248
252
- _onBlur ( ) { this . focused = false ; }
249
+ ngDoCheck ( ) {
250
+ if ( this . _ngControl ) {
251
+ // We need to re-evaluate this on every change detection cycle, because there are some
252
+ // error triggers that we can't subscribe to (e.g. parent form submissions). This means
253
+ // that whatever logic is in here has to be super lean or we risk destroying the performance.
254
+ this . _updateErrorState ( ) ;
255
+ } else {
256
+ // When the input isn't used together with `@angular/forms`, we need to check manually for
257
+ // changes to the native `value` property in order to update the floating label.
258
+ this . _dirtyCheckNativeValue ( ) ;
259
+ }
260
+ }
261
+
262
+ /** Focuses the input element. */
263
+ focus ( ) {
264
+ this . _elementRef . nativeElement . focus ( ) ;
265
+ }
266
+
267
+ /** Callback for the cases where the focused state of the input changes. */
268
+ _focusChanged ( isFocused : boolean ) {
269
+ if ( isFocused !== this . focused ) {
270
+ this . focused = isFocused ;
271
+ this . _stateChanges . next ( ) ;
272
+ }
273
+ }
253
274
254
275
_onInput ( ) {
255
276
// This is a noop function and is used to let Angular know whenever the value changes.
@@ -261,22 +282,42 @@ export class MdInputDirective {
261
282
// FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
262
283
}
263
284
264
- /** Whether the input is in an error state. */
265
- _isErrorState ( ) : boolean {
285
+ /** Re-evaluates the error state. This is only relevant with @angular/forms. */
286
+ private _updateErrorState ( ) {
287
+ const oldState = this . _isErrorState ;
266
288
const control = this . _ngControl ;
267
- const form = this . _parentFormGroup || this . _parentForm ;
268
- return control && this . errorStateMatcher ( control . control as FormControl , form ) ;
289
+ const parent = this . _parentFormGroup || this . _parentForm ;
290
+ const newState = control && this . errorStateMatcher ( control . control as FormControl , parent ) ;
291
+
292
+ if ( newState !== oldState ) {
293
+ this . _isErrorState = newState ;
294
+ this . _stateChanges . next ( ) ;
295
+ }
296
+ }
297
+
298
+ /** Does some manual dirty checking on the native input `value` property. */
299
+ private _dirtyCheckNativeValue ( ) {
300
+ const newValue = this . value ;
301
+
302
+ if ( this . _previousNativeValue !== newValue ) {
303
+ this . _previousNativeValue = newValue ;
304
+ this . _stateChanges . next ( ) ;
305
+ }
269
306
}
270
307
271
308
/** Make sure the input is a supported type. */
272
309
private _validateType ( ) {
273
- if ( MD_INPUT_INVALID_TYPES . indexOf ( this . _type ) !== - 1 ) {
310
+ if ( MD_INPUT_INVALID_TYPES . indexOf ( this . _type ) > - 1 ) {
274
311
throw getMdInputContainerUnsupportedTypeError ( this . _type ) ;
275
312
}
276
313
}
277
314
278
- private _isNeverEmpty ( ) { return this . _neverEmptyInputTypes . indexOf ( this . _type ) !== - 1 ; }
315
+ /** Checks whether the input type isn't one of the types that are never empty. */
316
+ private _isNeverEmpty ( ) {
317
+ return this . _neverEmptyInputTypes . indexOf ( this . _type ) > - 1 ;
318
+ }
279
319
320
+ /** Checks whether the input is invalid based on the native validation. */
280
321
private _isBadInput ( ) {
281
322
// The `validity` property won't be present on platform-server.
282
323
let validity = ( this . _elementRef . nativeElement as HTMLInputElement ) . validity ;
@@ -317,7 +358,7 @@ export class MdInputDirective {
317
358
// Remove align attribute to prevent it from interfering with layout.
318
359
'[attr.align]' : 'null' ,
319
360
'class' : 'mat-input-container' ,
320
- '[class.mat-input-invalid]' : '_mdInputChild._isErrorState() ' ,
361
+ '[class.mat-input-invalid]' : '_mdInputChild._isErrorState' ,
321
362
'[class.mat-focused]' : '_mdInputChild.focused' ,
322
363
'[class.ng-untouched]' : '_shouldForward("untouched")' ,
323
364
'[class.ng-touched]' : '_shouldForward("touched")' ,
@@ -329,6 +370,7 @@ export class MdInputDirective {
329
370
'(click)' : '_focusInput()' ,
330
371
} ,
331
372
encapsulation : ViewEncapsulation . None ,
373
+ changeDetection : ChangeDetectionStrategy . OnPush ,
332
374
} )
333
375
334
376
export class MdInputContainer implements AfterViewInit , AfterContentInit , AfterContentChecked {
@@ -337,7 +379,7 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
337
379
/** Color of the input divider, based on the theme. */
338
380
@Input ( ) color : 'primary' | 'accent' | 'warn' = 'primary' ;
339
381
340
- /** @deprecated Use color instead. */
382
+ /** @deprecated Use ` color` instead. */
341
383
@Input ( )
342
384
get dividerColor ( ) { return this . color ; }
343
385
set dividerColor ( value ) { this . color = value ; }
@@ -381,17 +423,11 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
381
423
382
424
/** Reference to the input's underline element. */
383
425
@ViewChild ( 'underline' ) underlineRef : ElementRef ;
384
-
385
426
@ContentChild ( MdInputDirective ) _mdInputChild : MdInputDirective ;
386
-
387
427
@ContentChild ( MdPlaceholder ) _placeholderChild : MdPlaceholder ;
388
-
389
428
@ContentChildren ( MdErrorDirective ) _errorChildren : QueryList < MdErrorDirective > ;
390
-
391
429
@ContentChildren ( MdHint ) _hintChildren : QueryList < MdHint > ;
392
-
393
430
@ContentChildren ( MdPrefix ) _prefixChildren : QueryList < MdPrefix > ;
394
-
395
431
@ContentChildren ( MdSuffix ) _suffixChildren : QueryList < MdSuffix > ;
396
432
397
433
constructor (
@@ -407,9 +443,20 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
407
443
this . _processHints ( ) ;
408
444
this . _validatePlaceholders ( ) ;
409
445
410
- // Re-validate when things change.
446
+ // Subscribe to changes in the child input state in order to update the container UI.
447
+ this . _mdInputChild . _stateChanges . subscribe ( ( ) => {
448
+ this . _validatePlaceholders ( ) ;
449
+ this . _changeDetectorRef . markForCheck ( ) ;
450
+ } ) ;
451
+
452
+ if ( this . _mdInputChild . _ngControl && this . _mdInputChild . _ngControl . valueChanges ) {
453
+ this . _mdInputChild . _ngControl . valueChanges . subscribe ( ( ) => {
454
+ this . _changeDetectorRef . markForCheck ( ) ;
455
+ } ) ;
456
+ }
457
+
458
+ // Re-validate when the amount of hints changes.
411
459
this . _hintChildren . changes . subscribe ( ( ) => this . _processHints ( ) ) ;
412
- this . _mdInputChild . _placeholderChange . subscribe ( ( ) => this . _validatePlaceholders ( ) ) ;
413
460
}
414
461
415
462
ngAfterContentChecked ( ) {
@@ -429,15 +476,19 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit, AfterC
429
476
}
430
477
431
478
/** Whether the input has a placeholder. */
432
- _hasPlaceholder ( ) { return ! ! ( this . _mdInputChild . placeholder || this . _placeholderChild ) ; }
479
+ _hasPlaceholder ( ) {
480
+ return ! ! ( this . _mdInputChild . placeholder || this . _placeholderChild ) ;
481
+ }
433
482
434
483
/** Focuses the underlying input. */
435
- _focusInput ( ) { this . _mdInputChild . focus ( ) ; }
484
+ _focusInput ( ) {
485
+ this . _mdInputChild . focus ( ) ;
486
+ }
436
487
437
488
/** Determines whether to display hints or errors. */
438
489
_getDisplayedMessages ( ) : 'error' | 'hint' {
439
490
let input = this . _mdInputChild ;
440
- return ( this . _errorChildren . length > 0 && input . _isErrorState ( ) ) ? 'error' : 'hint' ;
491
+ return ( this . _errorChildren . length > 0 && input . _isErrorState ) ? 'error' : 'hint' ;
441
492
}
442
493
443
494
/**
0 commit comments