refactor(forms): Even better forms

- remove $formFactory completely
- remove parallel scope hierarchy (forms, widgets)
- use new compiler features (widgets, forms are controllers)
- any directive can add formatter/parser (validators, convertors)

Breaks no custom input types
Breaks removed integer input type
Breaks remove list input type (ng-list directive instead)
Breaks inputs bind only blur event by default (added ng:bind-change directive)

1 files changed, 789 insertions, 466 deletions

diff --git a/test/widget/inputSpec.js b/test/widget/inputSpec.js
index 3b3aa282..daea7246 100644
--- a/test/widget/inputSpec.js
+++ b/test/widget/inputSpec.js
@@ -1,630 +1,953 @@
 'use strict';
 
-describe('widget: input', function() {
-  var compile = null, element = null, scope = null, defer = null;
-  var $compile = null;
-  var doc = null;
+describe('NgModelController', function() {
+  var ctrl, scope, ngModelAccessor;
 
-  beforeEach(inject(function($rootScope, $compile, $browser) {
+  beforeEach(inject(function($rootScope, $controller) {
     scope = $rootScope;
-    defer = $browser.defer;
-    set$compile($compile);
-    element = null;
-    compile = function(html, parent) {
-      if (parent) {
-        parent.html(html);
-        element = parent.children();
-      } else {
-        element = jqLite(html);
-      }
-      $compile(element)(scope);
-      scope.$apply();
-      return scope;
-    };
+    ngModelAccessor = jasmine.createSpy('ngModel accessor');
+    ctrl = $controller(NgModelController, {$scope: scope, ngModel: ngModelAccessor});
+
+    // mock accessor (locals)
+    ngModelAccessor.andCallFake(function(val) {
+      if (isDefined(val)) scope.value = val;
+      return scope.value;
+    });
   }));
 
-  function set$compile(c) { $compile = c; }
 
-  afterEach(function() {
-    dealoc(element);
-    dealoc(doc);
-  });
+  it('should init the properties', function() {
+    expect(ctrl.dirty).toBe(false);
+    expect(ctrl.pristine).toBe(true);
+    expect(ctrl.valid).toBe(true);
+    expect(ctrl.invalid).toBe(false);
 
+    expect(ctrl.viewValue).toBeDefined();
+    expect(ctrl.modelValue).toBeDefined();
 
-  describe('text', function() {
-    var form = null,
-        formElement = null,
-        inputElement = null;
+    expect(ctrl.formatters).toEqual([]);
+    expect(ctrl.parsers).toEqual([]);
+  });
 
-    function createInput(flags){
-      var prefix = '';
-      forEach(flags, function(value, key){
-        prefix += key + '="' + value + '" ';
-      });
-      formElement = doc = angular.element('<form name="form"><input ' + prefix +
-          'type="text" ng:model="name" name="name" ng:change="change()"></form>');
-      inputElement = formElement.find('input');
-      $compile(doc)(scope);
-      form = formElement.inheritedData('$form');
-    };
 
+  describe('touch', function() {
+    it('should only fire $viewTouch when pristine', function() {
+      var spy = jasmine.createSpy('$viewTouch');
+      scope.$on('$viewTouch', spy);
 
-    it('should bind update scope from model', function() {
-      createInput();
-      scope.name = 'misko';
-      scope.$digest();
-      expect(inputElement.val()).toEqual('misko');
+      ctrl.touch();
+      expect(ctrl.pristine).toBe(false);
+      expect(ctrl.dirty).toBe(true);
+      expect(spy).toHaveBeenCalledOnce();
+
+      spy.reset();
+      ctrl.touch();
+      expect(ctrl.pristine).toBe(false);
+      expect(ctrl.dirty).toBe(true);
+      expect(spy).not.toHaveBeenCalled();
     });
+  });
 
 
-    it('should require', function() {
-      createInput({required:''});
-      scope.$digest();
-      expect(scope.form.name.$valid).toBe(false);
-      scope.name = 'misko';
-      scope.$digest();
-      expect(scope.form.name.$valid).toBe(true);
+  describe('emitValidity', function() {
+
+    it('should emit $invalid only when $valid', function() {
+      var spy = jasmine.createSpy('$invalid');
+      scope.$on('$invalid', spy);
+
+      ctrl.emitValidity('ERROR', false);
+      expect(spy).toHaveBeenCalledOnce();
+
+      spy.reset();
+      ctrl.emitValidity('ERROR', false);
+      expect(spy).not.toHaveBeenCalled();
     });
 
 
-    it('should call $destroy on element remove', function() {
-      createInput();
-      var log = '';
-      form.$on('$destroy', function() {
-        log += 'destroy;';
-      });
-      inputElement.remove();
-      expect(log).toEqual('destroy;');
+    it('should set and unset the error', function() {
+      ctrl.emitValidity('REQUIRED', false);
+      expect(ctrl.error.REQUIRED).toBe(true);
+
+      ctrl.emitValidity('REQUIRED', true);
+      expect(ctrl.error.REQUIRED).toBeUndefined();
     });
 
 
-    it('should update the model and trim input', function() {
-      createInput();
-      var log = '';
-      scope.change = function() {
-        log += 'change();';
-      };
-      inputElement.val(' a ');
-      browserTrigger(inputElement);
-      defer.flush();
-      expect(scope.name).toEqual('a');
-      expect(log).toEqual('change();');
+    it('should set valid/invalid', function() {
+      ctrl.emitValidity('FIRST', false);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.emitValidity('SECOND', false);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.emitValidity('SECOND', true);
+      expect(ctrl.valid).toBe(false);
+      expect(ctrl.invalid).toBe(true);
+
+      ctrl.emitValidity('FIRST', true);
+      expect(ctrl.valid).toBe(true);
+      expect(ctrl.invalid).toBe(false);
     });
 
 
-    it('should change non-html5 types to text', inject(function($rootScope, $compile) {
-      doc = angular.element('<form name="form"><input type="abc" ng:model="name"></form>');
-      $compile(doc)($rootScope);
-      expect(doc.find('input').attr('type')).toEqual('text');
-    }));
+    it('should emit $valid only when $invalid', function() {
+      var spy = jasmine.createSpy('$valid');
+      scope.$on('$valid', spy);
 
+      ctrl.emitValidity('ERROR', true);
+      expect(spy).not.toHaveBeenCalled();
 
-    it('should not change html5 types to text', inject(function($rootScope, $compile) {
-      doc = angular.element('<form name="form"><input type="number" ng:model="name"></form>');
-      $compile(doc)($rootScope);
-      expect(doc.find('input')[0].getAttribute('type')).toEqual('number');
-    }));
+      ctrl.emitValidity('ERROR', false);
+      ctrl.emitValidity('ERROR', true);
+      expect(spy).toHaveBeenCalledOnce();
+    });
   });
 
 
-  describe("input", function() {
+  describe('view -> model', function() {
 
-    describe("text", function() {
-      it('should input-text auto init and listen on keydown/change/input events', function() {
-        compile('<input type="text" ng:model="name"/>');
+    it('should set the value to $viewValue', function() {
+      ctrl.read('some-val');
+      expect(ctrl.viewValue).toBe('some-val');
+    });
 
-        scope.name = 'Adam';
-        scope.$digest();
-        expect(element.val()).toEqual("Adam");
 
-        element.val('Shyam');
-        browserTrigger(element, 'keydown');
-        // keydown event must be deferred
-        expect(scope.name).toEqual('Adam');
-        defer.flush();
-        expect(scope.name).toEqual('Shyam');
+    it('should pipeline all registered parsers and set result to $modelValue', function() {
+      var log = [];
 
-        element.val('Kai');
-        browserTrigger(element, 'change');
-        defer.flush();
-        expect(scope.name).toEqual('Kai');
+      ctrl.parsers.push(function(value) {
+        log.push(value);
+        return value + '-a';
+      });
 
-        if (!(msie<=8)) {
-          element.val('Lunar');
-          browserTrigger(element, 'input');
-          defer.flush();
-          expect(scope.name).toEqual('Lunar');
-        }
+      ctrl.parsers.push(function(value) {
+        log.push(value);
+        return value + '-b';
       });
 
+      ctrl.read('init');
+      expect(log).toEqual(['init', 'init-a']);
+      expect(ctrl.modelValue).toBe('init-a-b');
+    });
 
-      it('should not trigger eval if value does not change', function() {
-        compile('<input type="text" ng:model="name" ng:change="count = count + 1" ng:init="count=0"/>');
-        scope.name = 'Misko';
-        scope.$digest();
-        expect(scope.name).toEqual("Misko");
-        expect(scope.count).toEqual(0);
-        browserTrigger(element, 'keydown');
-        defer.flush();
-        expect(scope.name).toEqual("Misko");
-        expect(scope.count).toEqual(0);
+
+    it('should fire $viewChange only if value changed and is valid', function() {
+      var spy = jasmine.createSpy('$viewChange');
+      scope.$on('$viewChange', spy);
+
+      ctrl.read('val');
+      expect(spy).toHaveBeenCalledOnce();
+      spy.reset();
+
+      // invalid
+      ctrl.parsers.push(function() {return undefined;});
+      ctrl.read('val');
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+
+  describe('model -> view', function() {
+
+    it('should set the value to $modelValue', function() {
+      scope.$apply(function() {
+        scope.value = 10;
       });
+      expect(ctrl.modelValue).toBe(10);
+    });
 
 
-      it('should allow complex reference binding', function() {
-        compile('<div>'+
-                  '<input type="text" ng:model="obj[\'abc\'].name"/>'+
-                '</div>');
-        scope.obj = { abc: { name: 'Misko'} };
-        scope.$digest();
-        expect(element.find('input').val()).toEqual('Misko');
+    it('should pipeline all registered formatters in reversed order and set result to $viewValue',
+        function() {
+      var log = [];
+
+      ctrl.formatters.unshift(function(value) {
+        log.push(value);
+        return value + 2;
       });
 
+      ctrl.formatters.unshift(function(value) {
+        log.push(value);
+        return value + '';
+      });
 
-      describe("ng:format", function() {
-        it("should format text", function() {
-          compile('<input type="list" ng:model="list"/>');
+      scope.$apply(function() {
+        scope.value = 3;
+      });
+      expect(log).toEqual([3, 5]);
+      expect(ctrl.viewValue).toBe('5');
+    });
 
-          scope.list = ['x', 'y', 'z'];
-          scope.$digest();
-          expect(element.val()).toEqual("x, y, z");
 
-          element.val('1, 2, 3');
-          browserTrigger(element);
-          defer.flush();
-          expect(scope.list).toEqual(['1', '2', '3']);
-        });
+    it('should $render only if value changed and is valid', function() {
+      spyOn(ctrl, 'render');
 
+      scope.$apply(function() {
+        scope.value= 3;
+      });
+      expect(ctrl.render).toHaveBeenCalledOnce();
+      ctrl.render.reset();
 
-        it("should render as blank if null", function() {
-          compile('<input type="text" ng:model="age" ng:format="number" ng:init="age=null"/>');
-          expect(scope.age).toBeNull();
-          expect(element[0].value).toEqual('');
-        });
+      // invalid
+      ctrl.formatters.push(function() {return undefined;});
+      scope.$apply(function() {
+        scope.value= 5;
+      });
+      expect(ctrl.render).not.toHaveBeenCalled();
+    });
+  });
+});
 
+describe('ng:model', function() {
 
-        it("should show incorrect text while number does not parse", function() {
-          compile('<input type="number" ng:model="age"/>');
-          scope.age = 123;
-          scope.$digest();
-          expect(element.val()).toEqual('123');
-          try {
-            // to allow non-number values, we have to change type so that
-            // the browser which have number validation will not interfere with
-            // this test. IE8 won't allow it hence the catch.
-            element[0].setAttribute('type', 'text');
-          } catch (e){}
-          element.val('123X');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('123X');
-          expect(scope.age).toEqual(123);
-          expect(element).toBeInvalid();
-        });
+  it('should set css classes (ng-valid, ng-invalid, ng-pristine, ng-dirty)',
+      inject(function($compile, $rootScope) {
+    var element = $compile('<input type="email" ng:model="value" />')($rootScope);
 
+    $rootScope.$digest();
+    expect(element).toBeValid();
+    expect(element).toBePristine();
 
-        it("should not clobber text if model changes due to itself", function() {
-          // When the user types 'a,b' the 'a,' stage parses to ['a'] but if the
-          // $parseModel function runs it will change to 'a', in essence preventing
-          // the user from ever typying ','.
-          compile('<input type="list" ng:model="list"/>');
-
-          element.val('a ');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('a ');
-          expect(scope.list).toEqual(['a']);
-
-          element.val('a ,');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('a ,');
-          expect(scope.list).toEqual(['a']);
-
-          element.val('a , ');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('a , ');
-          expect(scope.list).toEqual(['a']);
-
-          element.val('a , b');
-          browserTrigger(element, 'change');
-          defer.flush();
-          expect(element.val()).toEqual('a , b');
-          expect(scope.list).toEqual(['a', 'b']);
-        });
+    $rootScope.$apply(function() {
+      $rootScope.value = 'invalid-email';
+    });
+    expect(element).toBeInvalid();
+    expect(element).toBePristine();
 
+    element.val('invalid-again');
+    browserTrigger(element, 'blur');
+    expect(element).toBeInvalid();
+    expect(element).toBeDirty();
 
-        it("should come up blank when no value specified", function() {
-          compile('<input type="number" ng:model="age"/>');
-          scope.$digest();
-          expect(element.val()).toEqual('');
-          expect(scope.age).toEqual(null);
-        });
-      });
+    element.val('vojta@google.com');
+    browserTrigger(element, 'blur');
+    expect(element).toBeValid();
+    expect(element).toBeDirty();
 
+    dealoc(element);
+  }));
+});
 
-      describe("checkbox", function() {
-        it("should format booleans", function() {
-          compile('<input type="checkbox" ng:model="name" ng:init="name=false"/>');
-          expect(scope.name).toBe(false);
-          expect(element[0].checked).toBe(false);
-        });
 
+describe('input', function() {
+  var formElm, inputElm, scope, $compile;
 
-        it('should support type="checkbox" with non-standard capitalization', function() {
-          compile('<input type="checkBox" ng:model="checkbox"/>');
+  function compileInput(inputHtml) {
+    formElm = jqLite('<form name="form">' + inputHtml + '</form>');
+    inputElm = formElm.find('input');
+    $compile(formElm)(scope);
+  }
 
-          browserTrigger(element);
-          expect(scope.checkbox).toBe(true);
+  function changeInputValueTo(value) {
+    inputElm.val(value);
+    browserTrigger(inputElm, 'blur');
+  }
 
-          browserTrigger(element);
-          expect(scope.checkbox).toBe(false);
-        });
+  beforeEach(inject(function($injector) {
+    $compile = $injector.get('$compile');
+    scope = $injector.get('$rootScope');
+  }));
 
+  afterEach(function() {
+    dealoc(formElm);
+  });
 
-        it('should allow custom enumeration', function() {
-          compile('<input type="checkbox" ng:model="name" ng:true-value="y" ng:false-value="n">');
 
-          scope.name='y';
-          scope.$digest();
-          expect(element[0].checked).toBe(true);
+  it('should bind to a model', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
 
-          scope.name='n';
-          scope.$digest();
-          expect(element[0].checked).toBe(false);
+    scope.$apply(function() {
+      scope.name = 'misko';
+    });
 
-          scope.name='abc';
-          scope.$digest();
-          expect(element[0].checked).toBe(false);
+    expect(inputElm.val()).toBe('misko');
+  });
 
-          browserTrigger(element);
-          expect(scope.name).toEqual('y');
 
-          browserTrigger(element);
-          expect(scope.name).toEqual('n');
-        });
+  it('should call $destroy on element remove', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
 
+    var spy = jasmine.createSpy('on destroy');
+    scope.$on('$destroy', spy);
 
-        it('should fire ng:change when the value changes', function() {
-          compile('<input type="checkbox" ng:model="foo" ng:change="changeFn()">');
-          scope.changeFn = jasmine.createSpy('changeFn');
-          scope.$digest();
-          expect(scope.changeFn).not.toHaveBeenCalledOnce();
-          browserTrigger(element);
-          expect(scope.changeFn).toHaveBeenCalledOnce();
-        });
-      });
+    inputElm.remove();
+    expect(spy).toHaveBeenCalled();
+  });
+
+
+  it('should update the model on "blur" event', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
+
+    changeInputValueTo('adam');
+    expect(scope.name).toEqual('adam');
+  });
+
+
+  it('should update the model and trim the value', function() {
+    compileInput('<input type="text" ng:model="name" name="alias" ng:change="change()" />');
+
+    changeInputValueTo('  a  ');
+    expect(scope.name).toEqual('a');
+  });
+
+
+  it('should allow complex reference binding', function() {
+    compileInput('<input type="text" ng:model="obj[\'abc\'].name"/>');
+
+    scope.$apply(function() {
+      scope.obj = { abc: { name: 'Misko'} };
     });
+    expect(inputElm.val()).toEqual('Misko');
+  });
 
 
-    it("should process required", inject(function($formFactory) {
-      compile('<input type="text" ng:model="price" name="p" required/>', jqLite(document.body));
-      expect(element.hasClass('ng-invalid')).toBeTruthy();
+  it('should ignore input without ng:model attr', function() {
+    compileInput('<input type="text" name="whatever" required />');
 
-      scope.price = 'xxx';
+    browserTrigger(inputElm, 'blur');
+    expect(inputElm.hasClass('ng-valid')).toBe(false);
+    expect(inputElm.hasClass('ng-invalid')).toBe(false);
+    expect(inputElm.hasClass('ng-pristine')).toBe(false);
+    expect(inputElm.hasClass('ng-dirty')).toBe(false);
+  });
+
+
+  it('should report error on assignment error', function() {
+    expect(function() {
+      compileInput('<input type="text" ng:model="throw \'\'">');
       scope.$digest();
-      expect(element.hasClass('ng-invalid')).toBeFalsy();
+    }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at [''].");
+  });
 
-      element.val('');
-      browserTrigger(element);
-      defer.flush();
-      expect(element.hasClass('ng-invalid')).toBeTruthy();
-    }));
 
+  it("should render as blank if null", function() {
+    compileInput('<input type="text" ng:model="age" />');
 
-    it('should allow bindings on ng:required', function() {
-      compile('<input type="text" ng:model="price" ng:required="{{required}}"/>',
-              jqLite(document.body));
-      scope.price = '';
-      scope.required = false;
+    scope.$apply(function() {
+      scope.age = null;
+    });
+
+    expect(scope.age).toBeNull();
+    expect(inputElm.val()).toEqual('');
+  });
+
+
+  describe('pattern', function() {
+
+    it('should validate in-lined pattern', function() {
+      compileInput('<input type="text" ng:model="value" ng:pattern="/^\\d\\d\\d-\\d\\d-\\d\\d\\d\\d$/" />');
       scope.$digest();
-      expect(element).toBeValid();
 
-      scope.price = 'xxx';
+      changeInputValueTo('x000-00-0000x');
+      expect(inputElm).toBeInvalid();
+
+      changeInputValueTo('000-00-0000');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('000-00-0000x');
+      expect(inputElm).toBeInvalid();
+
+      changeInputValueTo('123-45-6789');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('x');
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    it('should validate pattern from scope', function() {
+      compileInput('<input type="text" ng:model="value" ng:pattern="regexp" />');
+      scope.regexp = /^\d\d\d-\d\d-\d\d\d\d$/;
       scope.$digest();
-      expect(element).toBeValid();
 
-      scope.price = '';
-      scope.required =  true;
+      changeInputValueTo('x000-00-0000x');
+      expect(inputElm).toBeInvalid();
+
+      changeInputValueTo('000-00-0000');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('000-00-0000x');
+      expect(inputElm).toBeInvalid();
+
+      changeInputValueTo('123-45-6789');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('x');
+      expect(inputElm).toBeInvalid();
+
+      scope.regexp = /abc?/;
+
+      changeInputValueTo('ab');
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('xx');
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    xit('should throw an error when scope pattern can\'t be found', function() {
+      compileInput('<input type="text" ng:model="foo" ng:pattern="fooRegexp" />');
+
+      expect(function() { changeInputValueTo('xx'); }).
+          toThrow('Expected fooRegexp to be a RegExp but was undefined');
+    });
+  });
+
+
+  describe('minlength', function() {
+
+    it('should invalid shorter than given minlenght', function() {
+      compileInput('<input type="text" ng:model="value" ng:minlength="3" />');
+
+      changeInputValueTo('aa');
+      expect(scope.value).toBeUndefined();
+
+      changeInputValueTo('aaa');
+      expect(scope.value).toBe('aaa');
+    });
+  });
+
+
+  describe('maxlength', function() {
+
+    it('should invalid shorter than given maxlenght', function() {
+      compileInput('<input type="text" ng:model="value" ng:maxlength="5" />');
+
+      changeInputValueTo('aaaaaaaa');
+      expect(scope.value).toBeUndefined();
+
+      changeInputValueTo('aaa');
+      expect(scope.value).toBe('aaa');
+    });
+  });
+
+
+  // INPUT TYPES
+
+  describe('number', function() {
+
+    it('should not update model if view invalid', function() {
+      compileInput('<input type="number" ng:model="age"/>');
+
+      scope.$apply(function() {
+        scope.age = 123;
+      });
+      expect(inputElm.val()).toBe('123');
+
+      try {
+        // to allow non-number values, we have to change type so that
+        // the browser which have number validation will not interfere with
+        // this test. IE8 won't allow it hence the catch.
+        inputElm[0].setAttribute('type', 'text');
+      } catch (e) {}
+
+      changeInputValueTo('123X');
+      expect(inputElm.val()).toBe('123X');
+      expect(scope.age).toBe(123);
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    it('should render as blank if null', function() {
+      compileInput('<input type="number" ng:model="age" />');
+
+      scope.$apply(function() {
+        scope.age = null;
+      });
+
+      expect(scope.age).toBeNull();
+      expect(inputElm.val()).toEqual('');
+    });
+
+
+    it('should come up blank when no value specified', function() {
+      compileInput('<input type="number" ng:model="age" />');
+
       scope.$digest();
-      expect(element).toBeInvalid();
+      expect(inputElm.val()).toBe('');
+
+      scope.$apply(function() {
+        scope.age = null;
+      });
 
-      element.val('abc');
-      browserTrigger(element);
-      defer.flush();
-      expect(element).toBeValid();
+      expect(scope.age).toBeNull();
+      expect(inputElm.val()).toBe('');
     });
 
 
-    describe('textarea', function() {
-      it("should process textarea", function() {
-        compile('<textarea ng:model="name"></textarea>');
+    it('should parse empty string to null', function() {
+      compileInput('<input type="number" ng:model="age" />');
 
-        scope.name = 'Adam';
+      scope.$apply(function() {
+        scope.age = 10;
+      });
+
+      changeInputValueTo('');
+      expect(scope.age).toBeNull();
+      expect(inputElm).toBeValid();
+    });
+
+
+    describe('min', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" min="10" />');
         scope.$digest();
-        expect(element.val()).toEqual("Adam");
 
-        element.val('Shyam');
-        browserTrigger(element);
-        defer.flush();
-        expect(scope.name).toEqual('Shyam');
+        changeInputValueTo('1');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeFalsy();
+        expect(scope.form.alias.error.MIN).toBeTruthy();
 
-        element.val('Kai');
-        browserTrigger(element);
-        defer.flush();
-        expect(scope.name).toEqual('Kai');
+        changeInputValueTo('100');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(100);
+        expect(scope.form.alias.error.MIN).toBeFalsy();
       });
     });
 
 
-    describe('radio', function() {
-      it('should support type="radio"', function() {
-        compile('<div>' +
-            '<input type="radio" name="r" ng:model="chose" value="A"/>' +
-            '<input type="radio" name="r" ng:model="chose" value="B"/>' +
-            '<input type="radio" name="r" ng:model="chose" value="C"/>' +
-        '</div>');
-        var a = element[0].childNodes[0];
-        var b = element[0].childNodes[1];
-        expect(b.name.split('@')[1]).toEqual('r');
-        scope.chose = 'A';
-        scope.$digest();
-        expect(a.checked).toBe(true);
+    describe('max', function() {
 
-        scope.chose = 'B';
+      it('should validate', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" max="10" />');
         scope.$digest();
-        expect(a.checked).toBe(false);
-        expect(b.checked).toBe(true);
-        expect(scope.clicked).not.toBeDefined();
 
-        browserTrigger(a);
-        expect(scope.chose).toEqual('A');
+        changeInputValueTo('20');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeFalsy();
+        expect(scope.form.alias.error.MAX).toBeTruthy();
+
+        changeInputValueTo('0');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(0);
+        expect(scope.form.alias.error.MAX).toBeFalsy();
       });
+    });
 
 
-      it('should honor model over html checked keyword after', function() {
-        compile('<div ng:init="choose=\'C\'">' +
-            '<input type="radio" ng:model="choose" value="A""/>' +
-            '<input type="radio" ng:model="choose" value="B" checked/>' +
-            '<input type="radio" ng:model="choose" value="C"/>' +
-        '</div>');
+    describe('required', function() {
 
-        expect(scope.choose).toEqual('C');
-        var inputs = element.find('input');
-        expect(inputs[1].checked).toBe(false);
-        expect(inputs[2].checked).toBe(true);
+      it('should be valid even if value is 0', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" required />');
+
+        changeInputValueTo('0');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(0);
+        expect(scope.form.alias.error.REQUIRED).toBeFalsy();
       });
 
+      it('should be valid even if value 0 is set from model', function() {
+        compileInput('<input type="number" ng:model="value" name="alias" required />');
 
-      it('should honor model over html checked keyword before', function() {
-        compile('<div ng:init="choose=\'A\'">' +
-            '<input type="radio" ng:model="choose" value="A""/>' +
-            '<input type="radio" ng:model="choose" value="B" checked/>' +
-            '<input type="radio" ng:model="choose" value="C"/>' +
-        '</div>');
+        scope.$apply(function() {
+          scope.value = 0;
+        });
 
-        expect(scope.choose).toEqual('A');
-        var inputs = element.find('input');
-        expect(inputs[0].checked).toBe(true);
-        expect(inputs[1].checked).toBe(false);
+        expect(inputElm).toBeValid();
+        expect(inputElm.val()).toBe('0')
+        expect(scope.form.alias.error.REQUIRED).toBeFalsy();
       });
+    });
+  });
 
+  describe('email', function() {
 
-      it('it should work with value attribute that is data-bound', function(){
-        compile(
-            '<li>'+
-              '<input ng:repeat="item in [\'a\', \'b\']" ' +
-              '       type="radio" ng:model="choice" value="{{item}}" name="choice">'+
-            '</li>');
+    it('should validate e-mail', function() {
+      compileInput('<input type="email" ng:model="email" name="alias" />');
 
-        var inputs = element.find('input');
-        expect(inputs[0].checked).toBe(false);
-        expect(inputs[1].checked).toBe(false);
+      var widget = scope.form.alias;
+      changeInputValueTo('vojta@google.com');
 
-        scope.choice = 'b';
-        scope.$digest();
-        expect(inputs[0].checked).toBe(false);
-        expect(inputs[1].checked).toBe(true);
+      expect(scope.email).toBe('vojta@google.com');
+      expect(inputElm).toBeValid();
+      expect(widget.error.EMAIL).toBeUndefined();
+
+      changeInputValueTo('invalid@');
+      expect(scope.email).toBe('vojta@google.com');
+      expect(inputElm).toBeInvalid();
+      expect(widget.error.EMAIL).toBeTruthy();
+    });
+
+
+    describe('EMAIL_REGEXP', function() {
+
+      it('should validate email', function() {
+        expect(EMAIL_REGEXP.test('a@b.com')).toBe(true);
+        expect(EMAIL_REGEXP.test('a@B.c')).toBe(false);
       });
+    });
+  });
+
+
+  describe('url', function() {
 
-      it('should data-bind the value attribute on initialization', inject(
-          function($rootScope, $compile){
-        $rootScope.choice = 'b';
-        $rootScope.items = ['a', 'b'];
-        element = $compile(
-            '<li>'+
-              '<input ng:repeat="item in items" ' +
-              '       type="radio" ng:model="choice" value="{{item}}" name="choice">'+
-            '</li>')($rootScope);
+    it('should validate url', function() {
+      compileInput('<input type="url" ng:model="url" name="alias" />');
+      var widget = scope.form.alias;
 
-        $rootScope.$digest();
-        var inputs = element.find('input');
-        expect(inputs[0].checked).toBe(false);
-        expect(inputs[1].checked).toBe(true);
-      }));
+      changeInputValueTo('http://www.something.com');
+      expect(scope.url).toBe('http://www.something.com');
+      expect(inputElm).toBeValid();
+      expect(widget.error.URL).toBeUndefined();
+
+      changeInputValueTo('invalid.com');
+      expect(scope.url).toBe('http://www.something.com');
+      expect(inputElm).toBeInvalid();
+      expect(widget.error.URL).toBeTruthy();
     });
 
 
-    describe('password', function () {
-      it('should not change password type to text', function () {
-        compile('<input type="password" ng:model="name" >');
-        expect(element.attr('type')).toBe('password');
+    describe('URL_REGEXP', function() {
+
+      it('should validate url', function() {
+        expect(URL_REGEXP.test('http://server:123/path')).toBe(true);
+        expect(URL_REGEXP.test('a@B.c')).toBe(false);
       });
     });
+  });
+
 
-    describe('number', function(){
-      it('should clear number on non-number', inject(function($compile, $rootScope){
-        $rootScope.value = 123;
-        var element = $compile('<input type="number" ng:model="value" >')($rootScope);
-        $rootScope.$digest();
-        expect(element.val()).toEqual('123');
-        $rootScope.value = undefined;
-        $rootScope.$digest();
-        expect(element.val()).toEqual('');
-        dealoc(element);
-      }));
+  describe('radio', function() {
+
+    it('should update the model', function() {
+      compileInput(
+          '<input type="radio" ng:model="color" value="white" />' +
+          '<input type="radio" ng:model="color" value="red" />' +
+          '<input type="radio" ng:model="color" value="blue" />');
+
+      scope.$apply(function() {
+        scope.color = 'white';
+      });
+      expect(inputElm[0].checked).toBe(true);
+      expect(inputElm[1].checked).toBe(false);
+      expect(inputElm[2].checked).toBe(false);
+
+      scope.$apply(function() {
+        scope.color = 'red';
+      });
+      expect(inputElm[0].checked).toBe(false);
+      expect(inputElm[1].checked).toBe(true);
+      expect(inputElm[2].checked).toBe(false);
+
+      browserTrigger(inputElm[2]);
+      expect(scope.color).toBe('blue');
     });
 
 
-    it('should ignore text widget which have no name', function() {
-      compile('<input type="text"/>');
-      expect(element.attr('ng-exception')).toBeFalsy();
-      expect(element.hasClass('ng-exception')).toBeFalsy();
+    // TODO(vojta): change interpolate ?
+    xit('should allow {{expr}} as value', function() {
+      scope.some = 11;
+      compileInput(
+          '<input type="radio" ng:model="value" value="{{some}}" />' +
+          '<input type="radio" ng:model="value" value="{{other}}" />');
+
+      browserTrigger(inputElm[0]);
+      expect(scope.value).toBe(true);
+
+      browserTrigger(inputElm[1]);
+      expect(scope.value).toBe(false);
     });
+  });
 
 
-    it('should ignore checkbox widget which have no name', function() {
-      compile('<input type="checkbox"/>');
-      expect(element.attr('ng-exception')).toBeFalsy();
-      expect(element.hasClass('ng-exception')).toBeFalsy();
+  describe('checkbox', function() {
+
+    it('should ignore checkbox without ng:model attr', function() {
+      compileInput('<input type="checkbox" name="whatever" required />');
+
+      browserTrigger(inputElm, 'blur');
+      expect(inputElm.hasClass('ng-valid')).toBe(false);
+      expect(inputElm.hasClass('ng-invalid')).toBe(false);
+      expect(inputElm.hasClass('ng-pristine')).toBe(false);
+      expect(inputElm.hasClass('ng-dirty')).toBe(false);
     });
 
 
-    it('should report error on assignment error', inject(function($log) {
-      expect(function() {
-        compile('<input type="text" ng:model="throw \'\'">');
-      }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at [''].");
-      $log.error.logs.shift();
-    }));
+    it('should format booleans', function() {
+      compileInput('<input type="checkbox" ng:model="name" />');
+
+      scope.$apply(function() {
+        scope.name = false;
+      });
+      expect(inputElm[0].checked).toBe(false);
+
+      scope.$apply(function() {
+        scope.name = true;
+      });
+      expect(inputElm[0].checked).toBe(true);
+    });
+
+
+    it('should support type="checkbox" with non-standard capitalization', function() {
+      compileInput('<input type="checkBox" ng:model="checkbox" />');
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.checkbox).toBe(true);
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.checkbox).toBe(false);
+    });
+
+
+    it('should allow custom enumeration', function() {
+      compileInput('<input type="checkbox" ng:model="name" ng:true-value="y" ' +
+          'ng:false-value="n">');
+
+      scope.$apply(function() {
+        scope.name = 'y';
+      });
+      expect(inputElm[0].checked).toBe(true);
+
+      scope.$apply(function() {
+        scope.name = 'n';
+      });
+      expect(inputElm[0].checked).toBe(false);
+
+      scope.$apply(function() {
+        scope.name = 'something else';
+      });
+      expect(inputElm[0].checked).toBe(false);
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.name).toEqual('y');
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.name).toEqual('n');
+    });
   });
 
 
-  describe('scope declaration', function() {
-    it('should read the declaration from scope', inject(function($rootScope, $compile, $formFactory) {
-      var input, formFactory;
-      var element = angular.element('<input type="@MyType" ng:model="abc">');
-      $rootScope.MyType = function($f, i) {
-        input = i;
-        formFactory = $f;
-      };
-      $rootScope.MyType.$inject = ['$formFactory', '$element'];
+  describe('textarea', function() {
 
-      $compile(element)($rootScope);
+    it("should process textarea", function() {
+      compileInput('<textarea ng:model="name"></textarea>');
+      inputElm = formElm.find('textarea');
 
-      expect(formFactory).toBe($formFactory);
-      expect(input[0]).toBe(element[0]);
-      dealoc(element);
-    }));
+      scope.$apply(function() {
+        scope.name = 'Adam';
+      });
+      expect(inputElm.val()).toEqual('Adam');
 
-    it('should throw an error of Controller not declared in scope', inject(function($rootScope, $compile) {
-      var input;
-      var element = angular.element('<input type="@DontExist" ng:model="abc">');
-      var error;
-      try {
-        $compile(element)($rootScope);
-        error = 'no error thrown';
-      } catch (e) {
-        error = e;
-      }
-      expect(error.message).toEqual("Argument 'DontExist' is not a function, got undefined");
-    }));
+      changeInputValueTo('Shyam');
+      expect(scope.name).toEqual('Shyam');
+
+      changeInputValueTo('Kai');
+      expect(scope.name).toEqual('Kai');
+    });
+
+
+    it('should ignore textarea without ng:model attr', function() {
+      compileInput('<textarea name="whatever" required></textarea>');
+      inputElm = formElm.find('textarea');
+
+      browserTrigger(inputElm, 'blur');
+      expect(inputElm.hasClass('ng-valid')).toBe(false);
+      expect(inputElm.hasClass('ng-invalid')).toBe(false);
+      expect(inputElm.hasClass('ng-pristine')).toBe(false);
+      expect(inputElm.hasClass('ng-dirty')).toBe(false);
+    });
   });
 
 
-  describe('text subtypes', function() {
+  describe('ng:list', function() {
 
-    function itShouldVerify(type, validList, invalidList, params, fn) {
-      describe(type, function() {
-        forEach(validList, function(value){
-          it('should validate "' + value + '"', function() {
-            setup(value);
-            expect(element).toBeValid();
-          });
-        });
-        forEach(invalidList, function(value){
-          it('should NOT validate "' + value + '"', function() {
-            setup(value);
-            expect(element).toBeInvalid();
-          });
-        });
+    it('should parse text into an array', function() {
+      compileInput('<input type="text" ng:model="list" ng:list />');
 
-        function setup(value){
-          var html = ['<input type="', type.split(' ')[0], '" '];
-          forEach(params||{}, function(value, key){
-            html.push(key + '="' + value + '" ');
-          });
-          html.push('ng:model="value">');
-          compile(html.join(''));
-          (fn||noop)(scope);
-          scope.value = null;
-          try {
-            // to allow non-number values, we have to change type so that
-            // the browser which have number validation will not interfere with
-            // this test. IE8 won't allow it hence the catch.
-            element[0].setAttribute('type', 'text');
-          } catch (e){}
-          if (value != undefined) {
-            element.val(value);
-            browserTrigger(element, 'keydown');
-            defer.flush();
-          }
-          scope.$digest();
-        }
+      // model -> view
+      scope.$apply(function() {
+        scope.list = ['x', 'y', 'z'];
       });
-    }
+      expect(inputElm.val()).toBe('x, y, z');
 
+      // view -> model
+      changeInputValueTo('1, 2, 3');
+      expect(scope.list).toEqual(['1', '2', '3']);
+    });
 
-    itShouldVerify('email', ['a@b.com'], ['a@B.c']);
 
+    it("should not clobber text if model changes due to itself", function() {
+      // When the user types 'a,b' the 'a,' stage parses to ['a'] but if the
+      // $parseModel function runs it will change to 'a', in essence preventing
+      // the user from ever typying ','.
+      compileInput('<input type="text" ng:model="list" ng:list />');
 
-    itShouldVerify('url', ['http://server:123/path'], ['a@b.c']);
+      changeInputValueTo('a ');
+      expect(inputElm.val()).toEqual('a ');
+      expect(scope.list).toEqual(['a']);
 
+      changeInputValueTo('a ,');
+      expect(inputElm.val()).toEqual('a ,');
+      expect(scope.list).toEqual(['a']);
 
-    itShouldVerify('number',
-        ['', '1', '12.34', '-4', '+13', '.1'],
-        ['x', '12b', '-6', '101'],
-        {min:-5, max:100});
+      changeInputValueTo('a , ');
+      expect(inputElm.val()).toEqual('a , ');
+      expect(scope.list).toEqual(['a']);
 
+      changeInputValueTo('a , b');
+      expect(inputElm.val()).toEqual('a , b');
+      expect(scope.list).toEqual(['a', 'b']);
+    });
 
-    itShouldVerify('integer',
-        [null, '', '1', '12', '-4', '+13'],
-        ['x', '12b', '-6', '101', '1.', '1.2'],
-        {min:-5, max:100});
 
+    xit('should require at least one item', function() {
+      compileInput('<input type="text" ng:model="list" ng:list required />');
 
-    itShouldVerify('integer',
-        [null, '', '0', '1'],
-        ['-1', '2'],
-        {min:0, max:1});
+      changeInputValueTo(' , ');
+      expect(inputElm).toBeInvalid();
+    });
 
 
-    itShouldVerify('text with inlined pattern constraint',
-        ['', '000-00-0000', '123-45-6789'],
-        ['x000-00-0000x', 'x000-00-0000', '000-00-0000x', 'x'],
-        {'ng:pattern':'/^\\d\\d\\d-\\d\\d-\\d\\d\\d\\d$/'});
+    it('should convert empty string to an empty array', function() {
+      compileInput('<input type="text" ng:model="list" ng:list />');
 
+      changeInputValueTo('');
+      expect(scope.list).toEqual([]);
+    });
+  });
+
+  describe('required', function() {
+
+    it('should allow bindings on required', function() {
+      compileInput('<input type="text" ng:model="value" required="{{required}}" />');
+
+      scope.$apply(function() {
+        scope.required = false;
+      });
+
+      changeInputValueTo('');
+      expect(inputElm).toBeValid();
+
+
+      scope.$apply(function() {
+        scope.required = true;
+      });
+      expect(inputElm).toBeInvalid();
+
+      scope.$apply(function() {
+        scope.value = 'some';
+      });
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('');
+      expect(inputElm).toBeInvalid();
+
+      scope.$apply(function() {
+        scope.required = false;
+      });
+      expect(inputElm).toBeValid();
+    });
+
+
+    it('should invalid initial value with bound required', function() {
+      compileInput('<input type="text" ng:model="value" required="{{required}}" />');
+
+      scope.$apply(function() {
+        scope.required = true;
+      });
+
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    it('should be $invalid but $pristine if not touched', function() {
+      compileInput('<input type="text" ng:model="name" name="alias" required />');
+
+      scope.$apply(function() {
+        scope.name = '';
+      });
+
+      expect(inputElm).toBeInvalid();
+      expect(inputElm).toBePristine();
+
+      changeInputValueTo('');
+      expect(inputElm).toBeInvalid();
+      expect(inputElm).toBeDirty();
+    });
+
+
+    it('should allow empty string if not required', function() {
+      compileInput('<input type="text" ng:model="foo" />');
+      changeInputValueTo('a');
+      changeInputValueTo('');
+      expect(scope.foo).toBe('');
+    });
+
+
+    it('should set $invalid when model undefined', function() {
+      compileInput('<input type="text" ng:model="notDefiend" required />');
+      scope.$digest();
+      expect(inputElm).toBeInvalid();
+    })
+  });
+
+
+  describe('ng:change', function() {
+
+    it('should $eval expression after new value is set in the model', function() {
+      compileInput('<input type="text" ng:model="value" ng:change="change()" />');
+
+      scope.change = jasmine.createSpy('change').andCallFake(function() {
+        expect(scope.value).toBe('new value');
+      });
+
+      changeInputValueTo('new value');
+      expect(scope.change).toHaveBeenCalledOnce();
+    });
+
+    it('should not $eval the expression if changed from model', function() {
+      compileInput('<input type="text" ng:model="value" ng:change="change()" />');
+
+      scope.change = jasmine.createSpy('change');
+      scope.$apply(function() {
+        scope.value = true;
+      });
+
+      expect(scope.change).not.toHaveBeenCalled();
+    });
+
+
+    it('should $eval ng:change expression on checkbox', function() {
+      compileInput('<input type="checkbox" ng:model="foo" ng:change="changeFn()">');
+
+      scope.changeFn = jasmine.createSpy('changeFn');
+      scope.$digest();
+      expect(scope.changeFn).not.toHaveBeenCalled();
+
+      browserTrigger(inputElm, 'click');
+      expect(scope.changeFn).toHaveBeenCalledOnce();
+    });
+  });
 
-    itShouldVerify('text with pattern constraint on scope',
-        ['', '000-00-0000', '123-45-6789'],
-        ['x000-00-0000x', 'x'],
-        {'ng:pattern':'regexp'}, function(scope){
-          scope.regexp = /^\d\d\d-\d\d-\d\d\d\d$/;
-        });
 
+  describe('ng:bind-change', function() {
 
-    itShouldVerify('text with ng:minlength limit',
-        ['', 'aaa', 'aaaaa', 'aaaaaaaaa'],
-        ['a', 'aa'],
-        {'ng:minlength': 3});
+    it('should bind keydown, change, input events', inject(function($browser) {
+      compileInput('<input type="text" ng:model="value" ng:bind-immediate />');
 
+      inputElm.val('value1');
+      browserTrigger(inputElm, 'keydown');
 
-    itShouldVerify('text with ng:maxlength limit',
-        ['', 'a', 'aa', 'aaa'],
-        ['aaaa', 'aaaaa', 'aaaaaaaaa'],
-        {'ng:maxlength': 3});
+      // should be async (because of keydown)
+      expect(scope.value).toBeUndefined();
 
+      $browser.defer.flush();
+      expect(scope.value).toBe('value1');
 
-    it('should throw an error when scope pattern can\'t be found', inject(function($rootScope, $compile) {
-      var el = jqLite('<input ng:model="foo" ng:pattern="fooRegexp">');
-      $compile(el)($rootScope);
+      inputElm.val('value2');
+      browserTrigger(inputElm, 'change');
+      $browser.defer.flush();
+      expect(scope.value).toBe('value2');
 
-      el.val('xx');
-      browserTrigger(el, 'keydown');
-      expect(function() { defer.flush(); }).
-        toThrow('Expected fooRegexp to be a RegExp but was undefined');
+      if (msie < 9) return;
 
-      dealoc(el);
+      inputElm.val('value3');
+      browserTrigger(inputElm, 'input');
+      $browser.defer.flush();
+      expect(scope.value).toBe('value3');
     }));
   });
 });