input examples

Author: mmalerba

src/lib/input/input.md

@@ -54,7 +54,7 @@ must implement a single method `isErrorState` which takes the `FormControl` for
 well as the parent form and returns a boolean indicating whether errors should be shown. (`true`
 indicating that they should be shown, and `false` indicating that they should not.)
 
-<!-- TODO(mmalerba): examplify -->
+<!-- example(input-error-state-matcher-example) -->
 
 ```html
 <mat-form-field>
@@ -91,7 +91,7 @@ globally cause input errors to show when the input is dirty and invalid.
 native `<textarea>` elements. The min and max size of the textarea can be specified in rows, using
 the `matAutosizeMinRows` and `matAutosizeMaxRows` properties respectively.
 
-<!-- TODO(mmalerba): example -->
+<!-- example(input-autosize-textarea-example) -->
 
 ### Accessibility
 The `matInput` directive works with native `<input>` to provide an accessible experience.

src/material-examples/example-module.ts

@@ -52,7 +52,9 @@ import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-exam
 import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
 import {IconOverviewExample} from './icon-overview/icon-overview-example';
 import {IconSvgExample} from './icon-svg-example/icon-svg-example';
+import {InputAutosizeTextareaExample} from './input-autosize-textarea/input-autosize-textarea-example';
 import {InputClearableExample} from './input-clearable/input-clearable-example';
+import {InputErrorStateMatcherExample} from './input-error-state-matcher/input-error-state-matcher-example';
 import {InputErrorsExample} from './input-errors/input-errors-example';
 import {InputFormExample} from './input-form/input-form-example';
 import {InputHintExample} from './input-hint/input-hint-example';
@@ -333,14 +335,26 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  'input-autosize-textarea': {
+    title: 'Auto-resizing textarea',
+    component: InputAutosizeTextareaExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'input-clearable': {
-    title: 'Input Clearable',
+    title: 'Input with a clear button',
     component: InputClearableExample,
     additionalFiles: null,
     selectorName: null
   },
+  'input-error-state-matcher': {
+    title: 'Input with a custom ErrorStateMatcher',
+    component: InputErrorStateMatcherExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'input-errors': {
-    title: 'Input Errors',
+    title: 'Input with error messages',
     component: InputErrorsExample,
     additionalFiles: null,
     selectorName: null
@@ -352,7 +366,7 @@ export const EXAMPLE_COMPONENTS = {
     selectorName: null
   },
   'input-hint': {
-    title: 'Input hints',
+    title: 'Input with hints',
     component: InputHintExample,
     additionalFiles: null,
     selectorName: null
@@ -364,7 +378,7 @@ export const EXAMPLE_COMPONENTS = {
     selectorName: null
   },
   'input-prefix-suffix': {
-    title: 'Input Prefixes and Suffixes',
+    title: 'Inputs with prefixes and suffixes',
     component: InputPrefixSuffixExample,
     additionalFiles: null,
     selectorName: null
@@ -645,7 +659,9 @@ export const EXAMPLE_LIST = [
   GridListOverviewExample,
   IconOverviewExample,
   IconSvgExample,
+  InputAutosizeTextareaExample,
   InputClearableExample,
+  InputErrorStateMatcherExample,
   InputErrorsExample,
   InputFormExample,
   InputHintExample,

src/material-examples/input-autosize-textarea/input-autosize-textarea-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/input-autosize-textarea/input-autosize-textarea-example.html

@@ -0,0 +1,4 @@
+<mat-form-field>
+  <textarea matInput placeholder="Autosize textarea" matTextareaAutosize matAutosizeMinRows="2"
+            matAutosizeMaxRows="5"></textarea>
+</mat-form-field>

src/material-examples/input-autosize-textarea/input-autosize-textarea-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+/** @title Auto-resizing textarea */
+@Component({
+  selector: 'input-autosize-textarea-example',
+  templateUrl: './input-autosize-textarea-example.html',
+  styleUrls: ['./input-autosize-textarea-example.css'],
+})
+export class InputAutosizeTextareaExample {}

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

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Input Clearable
+ * @title Input with a clear button
  */
 @Component({
   selector: 'input-clearable-example',

src/material-examples/input-error-state-matcher/input-error-state-matcher-example.css

@@ -0,0 +1,9 @@
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/material-examples/input-error-state-matcher/input-error-state-matcher-example.html

@@ -0,0 +1,13 @@
+<form class="example-form">
+  <mat-form-field class="example-full-width">
+    <input matInput placeholder="Email" [formControl]="emailFormControl"
+           [errorStateMatcher]="matcher">
+    <mat-hint>Errors appear instantly!</mat-hint>
+    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+      Please enter a valid email address
+    </mat-error>
+    <mat-error *ngIf="emailFormControl.hasError('required')">
+      Email is <strong>required</strong>
+    </mat-error>
+  </mat-form-field>
+</form>

src/material-examples/input-error-state-matcher/input-error-state-matcher-example.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import {ErrorStateMatcher} from '@angular/material';
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
+
+/** @title Input with a custom ErrorStateMatcher */
+@Component({
+  selector: 'input-error-state-matcher-example',
+  templateUrl: './input-error-state-matcher-example.html',
+  styleUrls: ['./input-error-state-matcher-example.css'],
+})
+export class InputErrorStateMatcherExample {
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.email,
+  ]);
+
+  matcher = new MyErrorStateMatcher();
+}

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

@@ -1,7 +1,7 @@
 <form class="example-form">
   <mat-form-field class="example-full-width">
     <input matInput placeholder="Email" [formControl]="emailFormControl">
-    <mat-error *ngIf="emailFormControl.hasError('pattern')">
+    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
       Please enter a valid email address
     </mat-error>
     <mat-error *ngIf="emailFormControl.hasError('required')">

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

@@ -1,20 +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-]+)*$/;
-
 /**
- * @title Input Errors
+ * @title Input with error messages
  */
 @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)]);
-
+    Validators.email,
+  ]);
 }

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

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

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

@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Input Prefixes and Suffixes
+ * @title Inputs with prefixes and suffixes
  */
 @Component({
   selector: 'input-prefix-suffix-example',
   templateUrl: 'input-prefix-suffix-example.html',
   styleUrls: ['input-prefix-suffix-example.css'],
 })
-export class InputPrefixSuffixExample { }
+export class InputPrefixSuffixExample {}