From 86869021fbc86bf7127b30d63d6c449bd78a1ab4 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 5 Feb 2019 23:10:06 +0100
Subject: [PATCH] docs(select): update live examples to use labels

* Fixes a few examples that didn't have labels for the native select.
* Switches all of the examples to use the `mat-label`, instead of a `placeholder`.

Fixes #15022.
---
 .../select-disabled/select-disabled-example.html            | 6 ++++--
 .../select-error-state-matcher-example.html                 | 6 ++++--
 src/material-examples/select-form/select-form-example.html  | 6 ++++--
 .../select-hint-error/select-hint-error-example.html        | 3 ++-
 .../select-multiple/select-multiple-example.html            | 3 ++-
 .../select-no-ripple/select-no-ripple-example.html          | 3 ++-
 .../select-optgroup/select-optgroup-example.html            | 4 +++-
 .../select-overview/select-overview-example.html            | 4 +++-
 .../select-panel-class/select-panel-class-example.html      | 3 ++-
 .../select-reset/select-reset-example.html                  | 3 ++-
 .../select-value-binding/select-value-binding-example.html  | 1 +
 11 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/material-examples/select-disabled/select-disabled-example.html b/src/material-examples/select-disabled/select-disabled-example.html
index 26bbe8e0df11..d436c80ce749 100644
--- a/src/material-examples/select-disabled/select-disabled-example.html
+++ b/src/material-examples/select-disabled/select-disabled-example.html
@@ -4,7 +4,8 @@
 
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
+  <mat-label>Choose an option</mat-label>
+  <mat-select [disabled]="disableSelect.value">
     <mat-option value="option1">Option 1</mat-option>
     <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
     <mat-option value="option3">Option 3</mat-option>
@@ -13,7 +14,8 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field>
-  <select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
+  <mat-label>Choose an option</mat-label>
+  <select matNativeControl [disabled]="disableSelect.value">
     <option value="" selected></option>
     <option value="volvo">Volvo</option>
     <option value="saab" disabled>Saab</option>
diff --git a/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html b/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html
index ab8fcbb94197..9e5f17b1a027 100644
--- a/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html
+++ b/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html
@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
+  <mat-label>Choose one</mat-label>
+  <mat-select [formControl]="selected" [errorStateMatcher]="matcher">
     <mat-option>Clear</mat-option>
     <mat-option value="valid">Valid option</mat-option>
     <mat-option value="invalid">Invalid option</mat-option>
@@ -14,7 +15,8 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field class="demo-full-width">
-  <select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
+  <mat-label>Choose one</mat-label>
+  <select matNativeControl [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
     <option value=""></option>
     <option value="valid" selected>Valid option</option>
     <option value="invalid">Invalid option</option>
diff --git a/src/material-examples/select-form/select-form-example.html b/src/material-examples/select-form/select-form-example.html
index 233dd9f46c81..f2b02b6a4e56 100644
--- a/src/material-examples/select-form/select-form-example.html
+++ b/src/material-examples/select-form/select-form-example.html
@@ -1,7 +1,8 @@
 <form>
   <h4>mat-select</h4>
   <mat-form-field>
-    <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+    <mat-label>Favorite food</mat-label>
+    <mat-select [(ngModel)]="selectedValue" name="food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
       </mat-option>
@@ -10,7 +11,8 @@ <h4>mat-select</h4>
   <p> Selected food: {{selectedValue}} </p>
   <h4>native html select</h4>
   <mat-form-field>
-    <select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
+    <mat-label>Favorite car</mat-label>
+    <select matNativeControl [(ngModel)]="selectedCar" name="car">
       <option value="" selected></option>
       <option *ngFor="let car of cars" [value]="car.value">
         {{car.viewValue}}
diff --git a/src/material-examples/select-hint-error/select-hint-error-example.html b/src/material-examples/select-hint-error/select-hint-error-example.html
index d7c9653725c2..d10b0d422ea4 100644
--- a/src/material-examples/select-hint-error/select-hint-error-example.html
+++ b/src/material-examples/select-hint-error/select-hint-error-example.html
@@ -1,6 +1,7 @@
 <h4>mat select</h4>
 <mat-form-field>
-  <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
+  <mat-label>Favorite animal</mat-label>
+  <mat-select [formControl]="animalControl" required>
     <mat-option>--</mat-option>
     <mat-option *ngFor="let animal of animals" [value]="animal">
       {{animal.name}}
diff --git a/src/material-examples/select-multiple/select-multiple-example.html b/src/material-examples/select-multiple/select-multiple-example.html
index 916ae396391a..2f617c7221fc 100644
--- a/src/material-examples/select-multiple/select-multiple-example.html
+++ b/src/material-examples/select-multiple/select-multiple-example.html
@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
+  <mat-label>Toppings</mat-label>
+  <mat-select [formControl]="toppings" multiple>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
   </mat-select>
 </mat-form-field>
diff --git a/src/material-examples/select-no-ripple/select-no-ripple-example.html b/src/material-examples/select-no-ripple/select-no-ripple-example.html
index a0b0ad4db057..4c722ae6eeb2 100644
--- a/src/material-examples/select-no-ripple/select-no-ripple-example.html
+++ b/src/material-examples/select-no-ripple/select-no-ripple-example.html
@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Select an option" disableRipple>
+  <mat-label>Select an option</mat-label>
+  <mat-select disableRipple>
     <mat-option value="1">Option 1</mat-option>
     <mat-option value="2">Option 2</mat-option>
     <mat-option value="3">Option 3</mat-option>
diff --git a/src/material-examples/select-optgroup/select-optgroup-example.html b/src/material-examples/select-optgroup/select-optgroup-example.html
index 74bb7cad8216..6482720884ee 100644
--- a/src/material-examples/select-optgroup/select-optgroup-example.html
+++ b/src/material-examples/select-optgroup/select-optgroup-example.html
@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
+  <mat-label>Pokemon</mat-label>
+  <mat-select [formControl]="pokemonControl">
     <mat-option>-- None --</mat-option>
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                   [disabled]="group.disabled">
@@ -13,6 +14,7 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field>
+  <mat-label>Cars</mat-label>
   <select matNativeControl>
     <optgroup label="Swedish Cars">
       <option value="volvo">volvo</option>
diff --git a/src/material-examples/select-overview/select-overview-example.html b/src/material-examples/select-overview/select-overview-example.html
index 5e6f1387f49f..d7df8280eee0 100644
--- a/src/material-examples/select-overview/select-overview-example.html
+++ b/src/material-examples/select-overview/select-overview-example.html
@@ -1,6 +1,7 @@
 <h4>Basic mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Favorite food">
+  <mat-label>Favorite food</mat-label>
+  <mat-select>
     <mat-option *ngFor="let food of foods" [value]="food.value">
       {{food.viewValue}}
     </mat-option>
@@ -9,6 +10,7 @@ <h4>Basic mat-select</h4>
 
 <h4>Basic native select</h4>
 <mat-form-field>
+  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
diff --git a/src/material-examples/select-panel-class/select-panel-class-example.html b/src/material-examples/select-panel-class/select-panel-class-example.html
index c3e560aa2dfd..1e48e43be26d 100644
--- a/src/material-examples/select-panel-class/select-panel-class-example.html
+++ b/src/material-examples/select-panel-class/select-panel-class-example.html
@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Panel color" [formControl]="panelColor"
+  <mat-label>Panel color</mat-label>
+  <mat-select [formControl]="panelColor"
               panelClass="example-panel-{{panelColor.value}}">
     <mat-option value="red">Red</mat-option>
     <mat-option value="green">Green</mat-option>
diff --git a/src/material-examples/select-reset/select-reset-example.html b/src/material-examples/select-reset/select-reset-example.html
index 235939f9a022..e0f734507aab 100644
--- a/src/material-examples/select-reset/select-reset-example.html
+++ b/src/material-examples/select-reset/select-reset-example.html
@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="State">
+  <mat-label>State</mat-label>
+  <mat-select>
     <mat-option>None</mat-option>
     <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
   </mat-select>
diff --git a/src/material-examples/select-value-binding/select-value-binding-example.html b/src/material-examples/select-value-binding/select-value-binding-example.html
index aa3e93b46e0f..061c1851e3b5 100644
--- a/src/material-examples/select-value-binding/select-value-binding-example.html
+++ b/src/material-examples/select-value-binding/select-value-binding-example.html
@@ -1,4 +1,5 @@
 <mat-form-field>
+  <mat-label>Select an option</mat-label>
   <mat-select [(value)]="selected">
     <mat-option>None</mat-option>
     <mat-option value="option1">Option 1</mat-option>