docs(input): add overview examples for input (#5228)

Author: amcdnl

src/lib/input/input.md

@@ -46,6 +46,8 @@ messages should be displayed. This can be done with CSS, `ngIf` or `ngSwitch`.
 Note that, while multiple error messages can be displayed at the same time, it is recommended to
 only show one at a time.
 
+<!-- example(input-errors) -->
+
 ### Placeholder
 
 A placeholder is an indicative text displayed in the input zone when the input does not contain
@@ -84,6 +86,8 @@ per the Material specification, and clicking it will focus the input.
 Adding the `mdPrefix` attribute to an element inside the `md-input-container` will designate it as
 the prefix. Similarly, adding `mdSuffix` will designate it as the suffix.
 
+<!-- example(input-prefix-suffix) -->
+
 ### Hint Labels
 
 Hint labels are the labels that show below the underline. An `md-input-container` can have up to two
@@ -95,6 +99,8 @@ Hint labels are specified in one of two ways: either using the `hintLabel` attri
 `align` attribute containing the side. The attribute version is assumed to be at the `start`.
 Specifying a side twice will result in an exception during initialization.
 
+<!-- example(input-hint) -->
+
 ### Underline Color
 
 The underline (line under the `input` content) color can be changed by using the `color`

src/material-examples/example-module.ts

@@ -28,7 +28,6 @@ import {IconOverviewExample} from './icon-overview/icon-overview-example';
 import {ProgressBarOverviewExample} from './progress-bar-overview/progress-bar-overview-example';
 import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example';
 import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
-import {InputOverviewExample} from './input-overview/input-overview-example';
 import {MenuOverviewExample} from './menu-overview/menu-overview-example';
 import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
 import {
@@ -51,7 +50,6 @@ import {TooltipPositionExample} from './tooltip-position/tooltip-position-exampl
 import {
   ProgressSpinnerConfigurableExample
 } from './progress-spinner-configurable/progress-spinner-configurable-example';
-import {InputFormExample} from './input-form/input-form-example';
 import {ListOverviewExample} from './list-overview/list-overview-example';
 import {SliderOverviewExample} from './slider-overview/slider-overview-example';
 import {
@@ -71,6 +69,12 @@ import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {SelectFormExample} from './select-form/select-form-example';
 import {DatepickerOverviewExample} from './datepicker-overview/datepicker-overview-example';
+import {InputOverviewExample} from './input-overview/input-overview-example';
+import {InputErrorsExample} from './input-errors/input-errors-example';
+import {InputFormExample} from './input-form/input-form-example';
+import {InputPrefixSuffixExample} from './input-prefix-suffix/input-prefix-suffix-example';
+import {InputHintExample} from './input-hint/input-hint-example';
+
 import {
   MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdCardModule, MdCheckboxModule,
   MdChipsModule, MdDatepickerModule, MdDialogModule, MdGridListModule, MdIconModule, MdInputModule,
@@ -132,6 +136,9 @@ export const EXAMPLE_COMPONENTS = {
   'icon-svg': {title: 'SVG icons', component: IconSvgExample},
   'input-form': {title: 'Inputs in a form', component: InputFormExample},
   'input-overview': {title: 'Basic inputs', component: InputOverviewExample},
+  'input-errors': {title: 'Input Errors', component: InputErrorsExample},
+  'input-prefix-suffix': {title: 'Input Prefixes/Suffixes', component: InputPrefixSuffixExample},
+  'input-hint': {title: 'Input Hint', component: InputHintExample},
   'list-overview': {title: 'Basic list', component: ListOverviewExample},
   'list-sections': {title: 'List with sections', component: ListSectionsExample},
   'menu-icons': {title: 'Menu with icons', component: MenuIconsExample},
@@ -238,6 +245,9 @@ export const EXAMPLE_LIST = [
   IconSvgExample,
   InputFormExample,
   InputOverviewExample,
+  InputPrefixSuffixExample,
+  InputHintExample,
+  InputErrorsExample,
   ListOverviewExample,
   ListSectionsExample,
   MenuIconsExample,

src/material-examples/input-errors/input-errors-example.css

@@ -0,0 +1,7 @@
+.example-form {
+  width: 500px;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/material-examples/input-errors/input-errors-example.html

@@ -0,0 +1,11 @@
+<form class="example-form">
+  <md-input-container class="example-full-width">
+    <input mdInput placeholder="Email" [formControl]="emailFormControl">
+    <md-error *ngIf="emailFormControl.hasError('pattern')">
+      Please enter a valid email address
+    </md-error>
+    <md-error *ngIf="emailFormControl.hasError('required')">
+      Email is <strong>required</strong>
+    </md-error>
+  </md-input-container>
+</form>

src/material-examples/input-errors/input-errors-example.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+@Component({
+  selector: 'input-errors-example',
+  templateUrl: 'input-errors-example.html',
+  styleUrls: ['input-errors-example.css'],
+})
+export class InputErrorsExample {
+
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.pattern(EMAIL_REGEX)]);
+
+}

src/material-examples/input-hint/input-hint-example.css

@@ -0,0 +1,7 @@
+.example-form {
+  width: 500px;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/material-examples/input-hint/input-hint-example.html

@@ -0,0 +1,9 @@
+<form class="example-form">
+
+  <md-input-container class="example-full-width">
+    <input mdInput #message maxlength="256" placeholder="Message">
+    <md-hint align="start"><strong>Don't disclose personal info</strong> </md-hint>
+    <md-hint align="end">{{message.value.length}} / 256</md-hint>
+  </md-input-container>
+  
+</form>

src/material-examples/input-hint/input-hint-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'input-hint-example',
+  templateUrl: 'input-hint-example.html',
+  styleUrls: ['input-hint-example.css'],
+})
+export class InputHintExample { }

src/material-examples/input-prefix-suffix/input-prefix-suffix-example.css

@@ -0,0 +1,7 @@
+.example-form {
+  width: 500px;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html

@@ -0,0 +1,9 @@
+<form class="example-form">
+
+  <md-input-container class="example-full-width">
+    <span mdPrefix>+1 &nbsp;</span>
+    <input type="tel" mdInput placeholder="Telephone">
+    <md-icon mdSuffix>mode_edit</md-icon>
+  </md-input-container>
+  
+</form>

src/material-examples/input-prefix-suffix/input-prefix-suffix-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'input-prefix-suffix-example',
+  templateUrl: 'input-prefix-suffix-example.html',
+  styleUrls: ['input-prefix-suffix-example.css'],
+})
+export class InputPrefixSuffixExample { }