fix(chips): dynamic chip input placeholder changes not being propagated to form field (#12422)

Fixes changes to the placeholder of a chip input not being propagated to its parent form field. Also un-deprecates the input for `placeholder`, because we need to know when it has changed.

Fixes #11861.

Author: crisbeto

src/lib/chips/chip-input.spec.ts

@@ -5,6 +5,8 @@ import {createKeyboardEvent} from '@angular/cdk/testing';
 import {Component, DebugElement} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatChipInput, MatChipInputEvent} from './chip-input';
 import {MatChipsModule} from './index';
 import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
@@ -20,7 +22,7 @@ describe('MatChipInput', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatChipsModule, PlatformModule],
+      imports: [PlatformModule, MatChipsModule, MatFormFieldModule, NoopAnimationsModule],
       declarations: [TestChipInput],
       providers: [{
         provide: Directionality, useFactory: () => {
@@ -64,6 +66,22 @@ describe('MatChipInput', () => {
 
       expect(inputNativeElement.getAttribute('placeholder')).toBe('bound placeholder');
     });
+
+    it('should propagate the dynamic `placeholder` value to the form field', () => {
+      fixture.componentInstance.placeholder = 'add a chip';
+      fixture.detectChanges();
+
+      const label: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field-label');
+
+      expect(label).toBeTruthy();
+      expect(label.textContent).toContain('add a chip');
+
+      fixture.componentInstance.placeholder = 'or don\'t';
+      fixture.detectChanges();
+
+      expect(label.textContent).toContain('or don\'t');
+    });
+
   });
 
   describe('[addOnBlur]', () => {
@@ -117,7 +135,7 @@ describe('MatChipInput', () => {
       TestBed
         .resetTestingModule()
         .configureTestingModule({
-          imports: [MatChipsModule, PlatformModule],
+          imports: [MatChipsModule, MatFormFieldModule, PlatformModule, NoopAnimationsModule],
           declarations: [TestChipInput],
           providers: [{
             provide: MAT_CHIPS_DEFAULT_OPTIONS,
@@ -146,12 +164,14 @@ describe('MatChipInput', () => {
 
 @Component({
   template: `
-    <mat-chip-list #chipList>
-    </mat-chip-list>
-    <input matInput [matChipInputFor]="chipList"
-              [matChipInputAddOnBlur]="addOnBlur"
-              (matChipInputTokenEnd)="add($event)"
-              [placeholder]="placeholder" />
+    <mat-form-field>
+      <mat-chip-list #chipList>
+      </mat-chip-list>
+      <input matInput [matChipInputFor]="chipList"
+                [matChipInputAddOnBlur]="addOnBlur"
+                (matChipInputTokenEnd)="add($event)"
+                [placeholder]="placeholder" />
+    </mat-form-field>
   `
 })
 class TestChipInput {

src/lib/chips/chip-input.ts

@@ -7,7 +7,7 @@
  */
 
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Directive, ElementRef, EventEmitter, Input, Output, Inject} from '@angular/core';
+import {Directive, ElementRef, EventEmitter, Input, Output, Inject, OnChanges} from '@angular/core';
 import {MatChipList} from './chip-list';
 import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
 
@@ -41,7 +41,7 @@ let nextUniqueId = 0;
     '[attr.placeholder]': 'placeholder || null',
   }
 })
-export class MatChipInput {
+export class MatChipInput implements OnChanges {
   /** Whether the control is focused. */
   focused: boolean = false;
   _chipList: MatChipList;
@@ -76,11 +76,7 @@ export class MatChipInput {
   @Output('matChipInputTokenEnd')
   chipEnd: EventEmitter<MatChipInputEvent> = new EventEmitter<MatChipInputEvent>();
 
-  /**
-   * The input's placeholder text.
-   * @deprecated Bind to the `placeholder` attribute directly.
-   * @breaking-change 7.0.0
-   */
+  /** The input's placeholder text. */
   @Input() placeholder: string = '';
 
   /** Unique id for the input. */
@@ -98,6 +94,10 @@ export class MatChipInput {
     this._inputElement = this._elementRef.nativeElement as HTMLInputElement;
   }
 
+  ngOnChanges() {
+    this._chipList.stateChanges.next();
+  }
+
   /** Utility method to make host definition/tests more clear. */
   _keydown(event?: KeyboardEvent) {
     this._emitChipEnd(event);