chore(slide-toggle): demo for slide-toggle with forms (#4848)

Closes #3161

src/material-examples/example-module.ts

@@ -27,6 +27,7 @@ import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-exam
 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';
@@ -159,6 +160,7 @@ export const EXAMPLE_COMPONENTS = {
     title: 'Configurable slide-toggle',
     component: SlideToggleConfigurableExample
   },
+  'slide-toggle-forms': {title: 'Slide-toggle with forms', component: SlideToggleFormsExample},
   'slide-toggle-overview': {title: 'Basic slide-toggles', component: SlideToggleOverviewExample},
   'snack-bar-component': {
     title: 'Snack-bar with a custom component',
@@ -252,6 +254,7 @@ export const EXAMPLE_LIST = [
   SliderOverviewExample,
   SlideToggleConfigurableExample,
   SlideToggleOverviewExample,
+  SlideToggleFormsExample,
   SnackBarComponentExample,
   PizzaPartyComponent,
   SnackBarOverviewExample,

src/material-examples/slide-toggle-forms/slide-toggle-forms-example.css

@@ -0,0 +1,4 @@
+.example-form md-slide-toggle {
+  margin: 8px 0;
+  display: block;
+}

src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html

@@ -0,0 +1,25 @@
+<p>Slide Toggle using a simple NgModel.</p>
+
+<md-slide-toggle [(ngModel)]="isChecked">Slide Toggle Checked: {{ isChecked }}</md-slide-toggle>
+
+<p>Slide Toggle inside of a Template-driven form</p>
+
+<form class="example-form" #form="ngForm" (ngSubmit)="onFormSubmit(form.value)" ngNativeValidate>
+
+  <md-slide-toggle ngModel name="enableWifi">Enable Wifi</md-slide-toggle>
+  <md-slide-toggle ngModel name="acceptTerms" required>Accept Terms of Service</md-slide-toggle>
+
+  <button md-raised-button type="submit">Save Settings</button>
+</form>
+
+<p>Slide Toggle inside of a Reactive form</p>
+
+<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit(formGroup.value)" ngNativeValidate>
+
+  <md-slide-toggle formControlName="enableWifi">Enable Wifi</md-slide-toggle>
+  <md-slide-toggle formControlName="acceptTerms">Accept Terms of Service</md-slide-toggle>
+
+  <p>Form Group Status: {{ formGroup.status}}</p>
+
+  <button md-rasied-button type="submit">Save Settings</button>
+</form>

src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'slide-toggle-forms-example',
+  templateUrl: './slide-toggle-forms-example.html',
+  styleUrls: ['./slide-toggle-forms-example.css'],
+})
+export class SlideToggleFormsExample {
+  isChecked = true;
+  formGroup: FormGroup;
+
+  constructor(formBuilder: FormBuilder) {
+    this.formGroup = formBuilder.group({
+      enableWifi: '',
+      acceptTerms: ['', Validators.requiredTrue]
+    });
+  }
+
+  onFormSubmit(formValue: any) {
+    alert(JSON.stringify(formValue, null, 2));
+  }
+}