fix(checkbox, slide-toggle): forward required attribute to input.

* Now forwards the required attribute to the input.
* This allows us to take advantage of the native browser behavior to prevent a form submission.

Fixes #1133,

Author: devversion

src/demo-app/slide-toggle/slide-toggle-demo.html

@@ -11,4 +11,19 @@
   <md-slide-toggle [disabled]="firstToggle">
     Disable Bound
   </md-slide-toggle>
+
+  <p>Example where the slide toggle is required inside of a form.</p>
+
+  <form #form="ngForm" (ngSubmit)="onFormSubmit()">
+
+    <md-slide-toggle name="slideToggle" required ngModel>
+      Slide Toggle
+    </md-slide-toggle>
+
+    <p>
+      <button md-raised-button type="submit">Submit Form</button>
+    </p>
+
+  </form>
+
 </div>

src/demo-app/slide-toggle/slide-toggle-demo.ts

@@ -7,4 +7,10 @@ import {Component} from '@angular/core';
   templateUrl: 'slide-toggle-demo.html',
   styleUrls: ['slide-toggle-demo.css'],
 })
-export class SlideToggleDemo {}
+export class SlideToggleDemo {
+
+  onFormSubmit() {
+    alert(`You submitted the form.`)
+  }
+
+}

src/lib/checkbox/checkbox.html

@@ -2,6 +2,7 @@
   <div class="md-checkbox-inner-container">
     <input class="md-checkbox-input" type="checkbox"
            [id]="inputId"
+           [required]="required"
            [checked]="checked"
            [disabled]="disabled"
            [name]="name"

src/lib/checkbox/checkbox.scss

@@ -470,6 +470,11 @@ md-checkbox {
 // Visually hidden but still able to respond to focus.
 .md-checkbox-input {
   @include md-visually-hidden;
+
+  // Move the input to the bottom and in the middle.
+  // Visual improvement to properly show browser popups when being required.
+  bottom: 0;
+  left: 50%;
 }
 
 @include md-temporary-ink-ripple(checkbox);

src/lib/checkbox/checkbox.spec.ts

@@ -255,6 +255,18 @@ describe('MdCheckbox', () => {
 
     }));
 
+    it('should forward the required attribute', () => {
+      testComponent.isRequired = true;
+      fixture.detectChanges();
+
+      expect(inputElement.required).toBe(true);
+
+      testComponent.isRequired = false;
+      fixture.detectChanges();
+
+      expect(inputElement.required).toBe(false);
+    });
+
     describe('state transition css classes', () => {
       it('should transition unchecked -> checked -> unchecked', () => {
         testComponent.isChecked = true;
@@ -502,6 +514,7 @@ describe('MdCheckbox', () => {
   <div (click)="parentElementClicked = true" (keyup)="parentElementKeyedUp = true">    
     <md-checkbox 
         id="simple-check"
+        [required]="isRequired"
         [align]="alignment"
         [checked]="isChecked" 
         [indeterminate]="isIndeterminate" 
@@ -516,6 +529,7 @@ describe('MdCheckbox', () => {
 class SingleCheckbox {
   alignment: string = 'start';
   isChecked: boolean = false;
+  isRequired: boolean = false;
   isIndeterminate: boolean = false;
   isDisabled: boolean = false;
   parentElementClicked: boolean = false;

src/lib/checkbox/checkbox.ts

@@ -11,6 +11,7 @@ import {
     NgModule,
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
+import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value';
 
 /**
  * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
@@ -91,6 +92,9 @@ export class MdCheckbox implements ControlValueAccessor {
     return `input-${this.id}`;
   }
 
+  /** Whether the checkbox is required or not. */
+  @Input() @BooleanFieldValue() required: boolean = false;
+
   /** Whether or not the checkbox should come before or after the label. */
   @Input() align: 'start' | 'end' = 'start';
 

src/lib/slide-toggle/slide-toggle.html

@@ -15,6 +15,7 @@
 
     <input #input class="md-slide-toggle-checkbox" type="checkbox"
            [id]="getInputId()"
+           [required]="required"
            [tabIndex]="tabIndex"
            [checked]="checked"
            [disabled]="disabled"

src/lib/slide-toggle/slide-toggle.scss

@@ -176,6 +176,11 @@ $md-slide-toggle-margin: 16px !default;
 // Like accessibility and keyboard interaction.
 .md-slide-toggle-checkbox {
   @include md-visually-hidden();
+
+  // Move the input to the bottom and in the middle of the thumb.
+  // Visual improvement to properly show browser popups when being required.
+  bottom: 0;
+  left: $md-slide-toggle-thumb-size / 2;
 }
 
 .md-slide-toggle-bar,

src/lib/slide-toggle/slide-toggle.spec.ts

@@ -9,7 +9,7 @@ describe('MdSlideToggle', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdSlideToggleModule, FormsModule],
-      declarations: [SlideToggleTestApp],
+      declarations: [SlideToggleTestApp, SlideToggleFormsTestApp],
     });
 
     TestBed.compileComponents();
@@ -332,6 +332,18 @@ describe('MdSlideToggle', () => {
       expect(slideToggleElement.classList).toContain('md-slide-toggle-focused');
     });
 
+    it('should forward the required attribute', () => {
+      testComponent.isRequired = true;
+      fixture.detectChanges();
+
+      expect(inputElement.required).toBe(true);
+
+      testComponent.isRequired = false;
+      fixture.detectChanges();
+
+      expect(inputElement.required).toBe(false);
+    });
+
   });
 
   describe('custom template', () => {
@@ -345,6 +357,44 @@ describe('MdSlideToggle', () => {
     }));
   });
 
+  describe('with forms', () => {
+
+    let fixture: ComponentFixture<any>;
+    let testComponent: SlideToggleFormsTestApp;
+    let buttonElement: HTMLButtonElement;
+    let labelElement: HTMLLabelElement;
+
+    // This initialization is async() because it needs to wait for ngModel to set the initial value.
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(SlideToggleFormsTestApp);
+
+      testComponent = fixture.debugElement.componentInstance;
+
+      fixture.detectChanges();
+
+      buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
+      labelElement = fixture.debugElement.query(By.css('label')).nativeElement;
+    }));
+
+    it('should prevent the form from submit when being required', async(() => {
+
+      let fixture = TestBed.createComponent(SlideToggleFormsTestApp);
+
+      fixture.detectChanges();
+
+      buttonElement.click();
+      expect(testComponent.isSubmitted).toBe(false);
+
+      // Make the form valid by setting the slide-toggle to true.
+      labelElement.click();
+      fixture.detectChanges();
+
+      buttonElement.click();
+      expect(testComponent.isSubmitted).toBe(true);
+    }));
+
+  })
+
 });
 
 /**
@@ -361,16 +411,25 @@ function dispatchFocusChangeEvent(eventName: string, element: HTMLElement): void
 @Component({
   selector: 'slide-toggle-test-app',
   template: `
-    <md-slide-toggle [(ngModel)]="slideModel" [disabled]="isDisabled" [color]="slideColor" 
-                     [id]="slideId" [checked]="slideChecked" [name]="slideName" 
-                     [ariaLabel]="slideLabel" [ariaLabelledby]="slideLabelledBy" 
-                     (change)="onSlideChange($event)"
+    <md-slide-toggle [(ngModel)]="slideModel" 
+                     [required]="isRequired"
+                     [disabled]="isDisabled" 
+                     [color]="slideColor" 
+                     [id]="slideId" 
+                     [checked]="slideChecked" 
+                     [name]="slideName" 
+                     [ariaLabel]="slideLabel"
+                     [ariaLabelledby]="slideLabelledBy" 
+                     (change)="onSlideChange($event)" 
                      (click)="onSlideClick($event)">
+                     
       <span>Test Slide Toggle</span>
+      
     </md-slide-toggle>`,
 })
 class SlideToggleTestApp {
   isDisabled: boolean = false;
+  isRequired: boolean = false;
   slideModel: boolean = false;
   slideChecked: boolean = false;
   slideColor: string;
@@ -385,3 +444,16 @@ class SlideToggleTestApp {
     this.lastEvent = event;
   }
 }
+
+
+@Component({
+  selector: 'slide-toggle-forms-test-app',
+  template: `
+    <form (ngSubmit)="isSubmitted = true">
+      <md-slide-toggle name="slideToggle" ngModel required>Required</md-slide-toggle>
+      <button type="submit"></button>
+    </form>`
+})
+class SlideToggleFormsTestApp {
+  isSubmitted: boolean = false;
+}

src/lib/slide-toggle/slide-toggle.ts

@@ -67,6 +67,7 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
   private _slideRenderer: SlideToggleRenderer = null;
 
   @Input() @BooleanFieldValue() disabled: boolean = false;
+  @Input() @BooleanFieldValue() required: boolean = false;
   @Input() name: string = null;
   @Input() id: string = this._uniqueId;
   @Input() tabIndex: number = 0;