diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index e21a6469160..62dd46fd106 100644 --- a/src/material-examples/example-module.ts +++ b/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, diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.css b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.css new file mode 100644 index 00000000000..8567e7f853b --- /dev/null +++ b/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; +} diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html new file mode 100644 index 00000000000..0a2b897d22f --- /dev/null +++ b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html @@ -0,0 +1,25 @@ +

Slide Toggle using a simple NgModel.

+ +Slide Toggle Checked: {{ isChecked }} + +

Slide Toggle inside of a Template-driven form

+ +
+ + Enable Wifi + Accept Terms of Service + + +
+ +

Slide Toggle inside of a Reactive form

+ +
+ + Enable Wifi + Accept Terms of Service + +

Form Group Status: {{ formGroup.status}}

+ + +
diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.ts new file mode 100644 index 00000000000..9402e23e9c9 --- /dev/null +++ b/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)); + } +}