Add value attribute to md-checkbox

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,8 @@
            [id]="inputId"
            [required]="required"
            [checked]="checked"
+           [attr.checked]="checked"
+           [attr.value]="value"
            [disabled]="disabled"
            [name]="name"
            [tabIndex]="tabindex"

src/lib/checkbox/checkbox.spec.ts

@@ -303,6 +303,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('color behaviour', () => {
       it('should apply class based on color attribute', () => {
         testComponent.checkboxColor = 'primary';
@@ -630,6 +637,7 @@ describe('MdCheckbox', () => {
         [indeterminate]="isIndeterminate"
         [disabled]="isDisabled"
         [color]="checkboxColor"
+        [value]="checkboxValue"
         (change)="changeCount = changeCount + 1"
         (click)="onCheckboxClick($event)"
         (change)="onCheckboxChange($event)">
@@ -648,6 +656,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

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