feat(checkbox): add value attribute to md-checkbox (#2701)

Fixes #2583

Author: tinayuangao

src/demo-app/checkbox/checkbox-demo.html

@@ -1,7 +1,8 @@
 <h1>md-checkbox: Basic Example</h1>
 <form>
 <md-checkbox [(ngModel)]="isChecked"
-              name="cb"
+             name="cb"
+             value="basic_checkbox"
              [color]="checkboxColor()"
              (change)="isIndeterminate = false"
              [indeterminate]="isIndeterminate"

src/lib/checkbox/checkbox.html

@@ -5,6 +5,7 @@
            [id]="inputId"
            [required]="required"
            [checked]="checked"
+           [value]="value"
            [disabled]="disabled"
            [name]="name"
            [tabIndex]="tabIndex"

src/lib/checkbox/checkbox.spec.ts

@@ -314,6 +314,13 @@ describe('MdCheckbox', () => {
       expect(document.activeElement).toBe(inputElement);
     });
 
+    it('should forward the value to input element', () => {
+      testComponent.checkboxValue = 'basic_checkbox';
+      fixture.detectChanges();
+
+      expect(inputElement.value).toBe('basic_checkbox');
+    });
+
     describe('ripple elements', () => {
 
       it('should show ripples on label mousedown', () => {
@@ -349,7 +356,6 @@ describe('MdCheckbox', () => {
         expect(checkboxNativeElement.querySelectorAll('[md-ripple]').length)
           .toBe(1, 'Expect [md-ripple] in checkbox');
       }));
-
     });
 
     describe('color behaviour', () => {
@@ -694,6 +700,7 @@ describe('MdCheckbox', () => {
         [disabled]="isDisabled"
         [color]="checkboxColor"
         [disableRipple]="disableRipple"
+        [value]="checkboxValue"
         (change)="changeCount = changeCount + 1"
         (click)="onCheckboxClick($event)"
         (change)="onCheckboxChange($event)">
@@ -713,6 +720,7 @@ class SingleCheckbox {
   lastKeydownEvent: Event = null;
   changeCount: number = 0;
   checkboxColor: string = 'primary';
+  checkboxValue: string = 'single_checkbox';
 
   onCheckboxClick(event: Event) {}
   onCheckboxChange(event: MdCheckboxChange) {}

src/lib/checkbox/checkbox.ts

@@ -151,6 +151,9 @@ export class MdCheckbox implements ControlValueAccessor {
   /** Event emitted when the checkbox's `indeterminate` value changes. */
   @Output() indeterminateChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
+  /** The value attribute of the native input element */
+  @Input() value: string ;
+
   /** The native `<input type="checkbox"> element */
   @ViewChild('input') _inputElement: ElementRef;