@angular/material v2.0.0-beta.12 examples updated.

src/assets/angular-material-examples/form-field-theming/form-field-theming-example.css

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

src/assets/angular-material-examples/form-field-theming/form-field-theming-example.html

@@ -0,0 +1,14 @@
+<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
+    <mat-form-field [color]="options.value.color">
+        <mat-select placeholder="Color" formControlName="color">
+            <mat-option value="primary">Primary</mat-option>
+            <mat-option value="accent">Accent</mat-option>
+            <mat-option value="warn">Warn</mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <mat-form-field [color]="options.value.color">
+        <input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
+        <mat-error *ngIf="options.get('fontSize').invalid">Min size: 10px</mat-error>
+    </mat-form-field>
+</form>

src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+/** @title Form field theming */
+@Component({
+    selector   : 'form-field-theming-example',
+    templateUrl: 'form-field-theming-example.html',
+    styleUrls  : ['form-field-theming-example.css']
+})
+export class FormFieldThemingExample
+{
+    options: FormGroup;
+
+    constructor(fb: FormBuilder)
+    {
+        this.options = fb.group({
+            'color'   : 'primary',
+            'fontSize': [16, Validators.min(10)]
+        });
+    }
+
+    getFontSize()
+    {
+        return Math.max(10, this.options.value.fontSize);
+    }
+}