feat(forms): added touched and untouched to Control

modules/angular2/src/forms/directives/checkbox_value_accessor.ts

@@ -17,15 +17,17 @@ import {ControlValueAccessor} from './control_value_accessor';
 @Directive({
   selector:
       'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
-  hostListeners: {'change': 'onChange($event.target.checked)'},
+  hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'},
   hostProperties: {'checked': 'checked'}
 })
 export class CheckboxControlValueAccessor implements ControlValueAccessor {
   checked: boolean;
   onChange: Function;
+  onTouched: Function;
 
   constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
     this.onChange = (_) => {};
+    this.onTouched = (_) => {};
     cd.valueAccessor = this;
   }
 
@@ -34,5 +36,6 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
                                       this._elementRef.boundElementIndex, 'checked', value)
   }
 
-  registerOnChange(fn) { this.onChange = fn; }
+  registerOnChange(fn): void { this.onChange = fn; }
+  registerOnTouched(fn): void { this.onTouched = fn; }
 }

modules/angular2/src/forms/directives/control_value_accessor.ts

@@ -1,4 +1,5 @@
 export interface ControlValueAccessor {
   writeValue(obj: any): void;
-  registerOnChange(fun: any): void;
+  registerOnChange(fn: any): void;
+  registerOnTouched(fn: any): void;
 }

modules/angular2/src/forms/directives/default_value_accessor.ts

@@ -19,16 +19,21 @@ import {ControlValueAccessor} from './control_value_accessor';
 @Directive({
   selector:
       'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model]',
-  hostListeners:
-      {'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
+  hostListeners: {
+    'change': 'onChange($event.target.value)',
+    'input': 'onChange($event.target.value)',
+    'blur': 'onTouched()'
+  },
   hostProperties: {'value': 'value'}
 })
 export class DefaultValueAccessor implements ControlValueAccessor {
   value = null;
   onChange: Function;
+  onTouched: Function;
 
   constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
     this.onChange = (_) => {};
+    this.onTouched = (_) => {};
     cd.valueAccessor = this;
   }
 
@@ -37,5 +42,6 @@ export class DefaultValueAccessor implements ControlValueAccessor {
                                       this._elementRef.boundElementIndex, 'value', value)
   }
 
-  registerOnChange(fn) { this.onChange = fn; }
-}
+  registerOnChange(fn): void { this.onChange = fn; }
+  registerOnTouched(fn): void { this.onTouched = fn; }
+}

modules/angular2/src/forms/directives/select_control_value_accessor.ts

@@ -18,16 +18,21 @@ import {ControlValueAccessor} from './control_value_accessor';
  */
 @Directive({
   selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
-  hostListeners:
-      {'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
+  hostListeners: {
+    'change': 'onChange($event.target.value)',
+    'input': 'onChange($event.target.value)',
+    'blur': 'onTouched()'
+  },
   hostProperties: {'value': 'value'}
 })
 export class SelectControlValueAccessor implements ControlValueAccessor {
   value = null;
   onChange: Function;
+  onTouched: Function;
 
   constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
     this.onChange = (_) => {};
+    this.onTouched = (_) => {};
     this.value = '';
     cd.valueAccessor = this;
   }
@@ -37,5 +42,6 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
                                       this._elementRef.boundElementIndex, 'value', value)
   }
 
-  registerOnChange(fn) { this.onChange = fn; }
-}
+  registerOnChange(fn): void { this.onChange = fn; }
+  registerOnTouched(fn): void { this.onTouched = fn; }
+}

modules/angular2/src/forms/directives/shared.ts

@@ -27,6 +27,9 @@ export function setUpControl(c: Control, dir: ControlDirective) {
 
   // model -> view
   c.registerOnChange(newValue => dir.valueAccessor.writeValue(newValue));
+
+  // touched
+  dir.valueAccessor.registerOnTouched(() => c.touch());
 }
 
 function _throwError(dir: ControlDirective, message: string): void {