diff options
| -rw-r--r-- | docs/content/cookbook/advancedform.ngdoc | 2 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.forms.ngdoc | 34 | ||||
| -rw-r--r-- | src/directive/form.js | 60 | ||||
| -rw-r--r-- | src/directive/input.js | 332 | ||||
| -rw-r--r-- | src/directive/select.js | 26 | ||||
| -rw-r--r-- | test/directive/formSpec.js | 78 | ||||
| -rw-r--r-- | test/directive/inputSpec.js | 152 | ||||
| -rw-r--r-- | test/directive/selectSpec.js | 6 |
8 files changed, 345 insertions, 345 deletions
diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc index 3e3b2d28..58a8dfd5 100644 --- a/docs/content/cookbook/advancedform.ngdoc +++ b/docs/content/cookbook/advancedform.ngdoc @@ -52,7 +52,7 @@ detection, and preventing invalid form submission. }; $scope.isSaveDisabled = function() { - return $scope.myForm.invalid || angular.equals(master, $scope.form); + return $scope.myForm.$invalid || angular.equals(master, $scope.form); }; $scope.cancel(); diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc index c79b9683..8cb0d4fe 100644 --- a/docs/content/guide/dev_guide.forms.ngdoc +++ b/docs/content/guide/dev_guide.forms.ngdoc @@ -162,9 +162,9 @@ stored on the `FormController`. <form name="form" class="css-form" novalidate> Name: <input type="text" ng-model="user.name" name="userName" required /><br /> E-mail: <input type="email" ng-model="user.email" name="userEmail" required/><br /> - <span ng-show="form.userEmail.dirty && form.userEmail.invalid">Invalid: - <span ng-show="form.userEmail.error.REQUIRED">Please tell us your email.</span> - <span ng-show="form.userEmail.error.EMAIL">This is not a valid email.</span><br /> + <span ng-show="form.userEmail.$dirty && form.userEmail.$invalid">Invalid: + <span ng-show="form.userEmail.$error.REQUIRED">Please tell us your email.</span> + <span ng-show="form.userEmail.$error.EMAIL">This is not a valid email.</span><br /> </span> Gender: <input type="radio" ng-model="user.gender" value="male" />male @@ -175,7 +175,7 @@ stored on the `FormController`. <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div> <button ng-click="reset()" disabled="{{isUnchanged(user)}}">RESET</button> - <button ng-click="update(user)" disabled="{{form.invalid || isUnchanged(user)}}">SAVE</button> + <button ng-click="update(user)" disabled="{{form.$invalid || isUnchanged(user)}}">SAVE</button> </form> </div> @@ -214,10 +214,10 @@ function gets fourth argument - an instance of `NgModelController`, which is a c to `ng-model`, that allows you to hook into the validation process. ## Model to View update -Whenever the bound model changes, all functions in {@link api/angular.module.ng.$compileProvider.directive.ng:model.NgModelController#formatters NgModelController#formatters} array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through {@link api/angualar.module.ng.$compileProvider.directive.ng:model.NgModelController#setValidity NgModelController#setValidity}. +Whenever the bound model changes, all functions in {@link api/angular.module.ng.$compileProvider.directive.ng:model.NgModelController#formatters NgModelController#formatters} array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through {@link api/angualar.module.ng.$compileProvider.directive.ng:model.NgModelController#$setValidity NgModelController#$setValidity}. ## View to Model update -In a similar way, whenever a form control calls {@link api/angular.module.ng.$compileProvider.directive.ng:model.NgModelController#setViewValue NgModelController#setViewValue}, all functions in {@link api/angular.module.ng.$compileProvider.directive.ng:model.NgModelController#parsers NgModelController#parsers} array are pipe-lined, so that each of these functions has an opportunity to correct/convert the value and change validity state of the form control through {@link api/angualar.module.ng.$compileProvider.directive.ng:model.NgModelController#setValidity NgModelController#setValidity}. +In a similar way, whenever a form control calls {@link api/angular.module.ng.$compileProvider.directive.ng:model.NgModelController#setViewValue NgModelController#setViewValue}, all functions in {@link api/angular.module.ng.$compileProvider.directive.ng:model.NgModelController#parsers NgModelController#parsers} array are pipe-lined, so that each of these functions has an opportunity to correct/convert the value and change validity state of the form control through {@link api/angualar.module.ng.$compileProvider.directive.ng:model.NgModelController#setValidity NgModelController#$setValidity}. In this example we create two simple directives. The first one is `integer` and it validates whether the input is valid integer, so for example `1.23` is an invalid value. Note, that we unshift the array instead of pushing - that's because we want to get a string value, so we need to execute the validation function before a conversion to number happens. @@ -230,13 +230,13 @@ The second directive is `smart-float`. It parses both `1.2` and `1,2` into a val <form name="form" class="css-form" novalidate> <div> Size (integer 0 - 10): <input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}<br /> - <span ng-show="form.size.error.INTEGER">This is not valid integer!</span> - <span ng-show="form.size.error.MIN || form.size.error.MAX">The value must be in range 0 to 10!</span> + <span ng-show="form.size.$error.INTEGER">This is not valid integer!</span> + <span ng-show="form.size.$error.MIN || form.size.$error.MAX">The value must be in range 0 to 10!</span> </div> <div> Length (float): <input type="text" ng-model="length" name="length" smart-float />{{length}}<br /> - <span ng-show="form.length.error.FLOAT">This is not valid number!</span> + <span ng-show="form.length.$error.FLOAT">This is not valid number!</span> </div> </form> </div> @@ -249,14 +249,14 @@ The second directive is `smart-float`. It parses both `1.2` and `1,2` into a val return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { - ctrl.parsers.unshift(function(viewValue) { + ctrl.$parsers.unshift(function(viewValue) { if (INTEGER_REGEXP.test(viewValue)) { // it is valid - ctrl.setValidity('INTEGER', true); + ctrl.$setValidity('INTEGER', true); return viewValue; } else { // it is invalid, return undefined (no model update) - ctrl.setValidity('INTEGER', false); + ctrl.$setValidity('INTEGER', false); return undefined; } }); @@ -269,12 +269,12 @@ The second directive is `smart-float`. It parses both `1.2` and `1,2` into a val return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { - ctrl.parsers.unshift(function(viewValue) { + ctrl.$parsers.unshift(function(viewValue) { if (FLOAT_REGEXP.test(viewValue)) { - ctrl.setValidity('FLOAT', true); + ctrl.$setValidity('FLOAT', true); return parseFloat(viewValue.replace(',', '.')); } else { - ctrl.setValidity('FLOAT', false); + ctrl.$setValidity('FLOAT', false); return undefined; } }); @@ -308,7 +308,7 @@ This example shows how easy it is to add a support for binding contentEditable e // view -> model elm.bind('blur', function() { scope.$apply(function() { - ctrl.setViewValue(elm.html()); + ctrl.$setViewValue(elm.html()); }); }); @@ -318,7 +318,7 @@ This example shows how easy it is to add a support for binding contentEditable e }; // load init value from DOM - ctrl.setViewValue(elm.html()); + ctrl.$setViewValue(elm.html()); } }; }); diff --git a/src/directive/form.js b/src/directive/form.js index 27ba1044..5427384a 100644 --- a/src/directive/form.js +++ b/src/directive/form.js @@ -5,12 +5,12 @@ * @ngdoc object * @name angular.module.ng.$compileProvider.directive.form.FormController * - * @property {boolean} pristine True if user has not interacted with the form yet. - * @property {boolean} dirty True if user has already interacted with the form. - * @property {boolean} valid True if all of the containg widgets are valid. - * @property {boolean} invalid True if at least one containing widget is invalid. + * @property {boolean} $pristine True if user has not interacted with the form yet. + * @property {boolean} $dirty True if user has already interacted with the form. + * @property {boolean} $valid True if all of the containg widgets are valid. + * @property {boolean} $invalid True if at least one containing widget is invalid. * - * @property {Object} error Is an object hash, containing references to all invalid widgets, where + * @property {Object} $error Is an object hash, containing references to all invalid widgets, where * * - keys are error ids (such as `REQUIRED`, `URL` or `EMAIL`), * - values are arrays of widgets that are invalid with given error. @@ -22,11 +22,11 @@ * of `FormController`. * */ -FormController.$inject = ['$scope', 'name', '$element']; -function FormController($scope, name, element) { +FormController.$inject = ['name', '$element']; +function FormController(name, element) { var form = this, parentForm = element.parent().inheritedData('$formController'), - errors = form.error = {}; + errors = form.$error = {}; // publish the form into scope name(this); @@ -36,14 +36,14 @@ function FormController($scope, name, element) { } form.$addControl = function(control) { - if (control.name && !form.hasOwnProperty(control.name)) { - form[control.name] = control; + if (control.$name && !form.hasOwnProperty(control.$name)) { + form[control.$name] = control; } } form.$removeControl = function(control) { - if (control.name && form[control.name] === control) { - delete form[control.name]; + if (control.$name && form[control.$name] === control) { + delete form[control.$name]; } forEach(errors, cleanupControlErrors, control); }; @@ -53,27 +53,27 @@ function FormController($scope, name, element) { cleanupControlErrors(errors[validationToken], validationToken, control); if (equals(errors, {})) { - form.valid = true; - form.invalid = false; + form.$valid = true; + form.$invalid = false; } } else { addControlError(validationToken, control); - form.valid = false; - form.invalid = true; + form.$valid = false; + form.$invalid = true; } }; form.$setDirty = function() { - form.dirty = true; - form.pristine = false; + form.$dirty = true; + form.$pristine = false; } // init state - form.dirty = false; - form.pristine = true; - form.valid = true; - form.invalid = false; + form.$dirty = false; + form.$pristine = true; + form.$valid = true; + form.$invalid = false; function cleanupControlErrors(queue, validationToken, control) { if (queue) { @@ -180,24 +180,24 @@ function FormController($scope, name, element) { </script> <form name="myForm" ng-controller="Ctrl"> userType: <input name="input" ng-model="userType" required> - <span class="error" ng-show="myForm.input.error.REQUIRED">Required!</span><br> + <span class="error" ng-show="myForm.input.$error.REQUIRED">Required!</span><br> <tt>userType = {{userType}}</tt><br> - <tt>myForm.input.valid = {{myForm.input.valid}}</tt><br> - <tt>myForm.input.error = {{myForm.input.error}}</tt><br> - <tt>myForm.valid = {{myForm.valid}}</tt><br> - <tt>myForm.error.REQUIRED = {{!!myForm.error.REQUIRED}}</tt><br> + <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br> + <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br> + <tt>myForm.$valid = {{myForm.$valid}}</tt><br> + <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br> </form> </doc:source> <doc:scenario> it('should initialize to model', function() { expect(binding('userType')).toEqual('guest'); - expect(binding('myForm.input.valid')).toEqual('true'); + expect(binding('myForm.input.$valid')).toEqual('true'); }); it('should be invalid if empty', function() { input('userType').enter(''); expect(binding('userType')).toEqual(''); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); </doc:scenario> </doc:example> @@ -219,7 +219,7 @@ var formDirective = [function() { forEach(['valid', 'invalid', 'dirty', 'pristine'], function(name) { scope.$watch(function() { - return controller[name]; + return controller['$' + name]; }, function(value) { formElement[value ? 'addClass' : 'removeClass']('ng-' + name); }); diff --git a/src/directive/input.js b/src/directive/input.js index 019bfaf0..6295a4b0 100644 --- a/src/directive/input.js +++ b/src/directive/input.js @@ -38,33 +38,33 @@ var inputType = { <form name="myForm" ng-controller="Ctrl"> Single word: <input type="text" name="input" ng-model="text" ng-pattern="word" required> - <span class="error" ng-show="myForm.input.error.REQUIRED"> + <span class="error" ng-show="myForm.input.$error.REQUIRED"> Required!</span> - <span class="error" ng-show="myForm.input.error.PATTERN"> + <span class="error" ng-show="myForm.input.$error.PATTERN"> Single word only!</span> <tt>text = {{text}}</tt><br/> - <tt>myForm.input.valid = {{myForm.input.valid}}</tt><br/> - <tt>myForm.input.error = {{myForm.input.error}}</tt><br/> - <tt>myForm.valid = {{myForm.valid}}</tt><br/> - <tt>myForm.error.REQUIRED = {{!!myForm.error.REQUIRED}}</tt><br/> + <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> + <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> + <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> + <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br/> </form> </doc:source> <doc:scenario> it('should initialize to model', function() { expect(binding('text')).toEqual('guest'); - expect(binding('myForm.input.valid')).toEqual('true'); + expect(binding('myForm.input.$valid')).toEqual('true'); }); it('should be invalid if empty', function() { input('text').enter(''); expect(binding('text')).toEqual(''); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); it('should be invalid if multi word', function() { input('text').enter('hello world'); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); </doc:scenario> </doc:example> @@ -106,33 +106,33 @@ var inputType = { <form name="myForm" ng-controller="Ctrl"> Number: <input type="number" name="input" ng-model="value" min="0" max="99" required> - <span class="error" ng-show="myForm.list.error.REQUIRED"> + <span class="error" ng-show="myForm.list.$error.REQUIRED"> Required!</span> - <span class="error" ng-show="myForm.list.error.NUMBER"> + <span class="error" ng-show="myForm.list.$error.NUMBER"> Not valid number!</span> <tt>value = {{value}}</tt><br/> - <tt>myForm.input.valid = {{myForm.input.valid}}</tt><br/> - <tt>myForm.input.error = {{myForm.input.error}}</tt><br/> - <tt>myForm.valid = {{myForm.valid}}</tt><br/> - <tt>myForm.error.REQUIRED = {{!!myForm.error.REQUIRED}}</tt><br/> + <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> + <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> + <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> + <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br/> </form> </doc:source> <doc:scenario> it('should initialize to model', function() { expect(binding('value')).toEqual('12'); - expect(binding('myForm.input.valid')).toEqual('true'); + expect(binding('myForm.input.$valid')).toEqual('true'); }); it('should be invalid if empty', function() { input('value').enter(''); expect(binding('value')).toEqual(''); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); it('should be invalid if over max', function() { input('value').enter('123'); expect(binding('value')).toEqual(''); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); </doc:scenario> </doc:example> @@ -171,33 +171,33 @@ var inputType = { </script> <form name="myForm" ng-controller="Ctrl"> URL: <input type="url" name="input" ng-model="text" required> - <span class="error" ng-show="myForm.input.error.REQUIRED"> + <span class="error" ng-show="myForm.input.$error.REQUIRED"> Required!</span> - <span class="error" ng-show="myForm.input.error.url"> + <span class="error" ng-show="myForm.input.$error.url"> Not valid url!</span> <tt>text = {{text}}</tt><br/> - <tt>myForm.input.valid = {{myForm.input.valid}}</tt><br/> - <tt>myForm.input.error = {{myForm.input.error}}</tt><br/> - <tt>myForm.valid = {{myForm.valid}}</tt><br/> - <tt>myForm.error.REQUIRED = {{!!myForm.error.REQUIRED}}</tt><br/> - <tt>myForm.error.url = {{!!myForm.error.url}}</tt><br/> + <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> + <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> + <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> + <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br/> + <tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/> </form> </doc:source> <doc:scenario> it('should initialize to model', function() { expect(binding('text')).toEqual('http://google.com'); - expect(binding('myForm.input.valid')).toEqual('true'); + expect(binding('myForm.input.$valid')).toEqual('true'); }); it('should be invalid if empty', function() { input('text').enter(''); expect(binding('text')).toEqual(''); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); it('should be invalid if not url', function() { input('text').enter('xxx'); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); </doc:scenario> </doc:example> @@ -234,33 +234,33 @@ var inputType = { </script> <form name="myForm" ng-controller="Ctrl"> Email: <input type="email" name="input" ng-model="text" required> - <span class="error" ng-show="myForm.input.error.REQUIRED"> + <span class="error" ng-show="myForm.input.$error.REQUIRED"> Required!</span> - <span class="error" ng-show="myForm.input.error.EMAIL"> + <span class="error" ng-show="myForm.input.$error.EMAIL"> Not valid email!</span> <tt>text = {{text}}</tt><br/> - <tt>myForm.input.valid = {{myForm.input.valid}}</tt><br/> - <tt>myForm.input.error = {{myForm.input.error}}</tt><br/> - <tt>myForm.valid = {{myForm.valid}}</tt><br/> - <tt>myForm.error.REQUIRED = {{!!myForm.error.REQUIRED}}</tt><br/> - <tt>myForm.error.EMAIL = {{!!myForm.error.EMAIL}}</tt><br/> + <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> + <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> + <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> + <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br/> + <tt>myForm.$error.EMAIL = {{!!myForm.$error.EMAIL}}</tt><br/> </form> </doc:source> <doc:scenario> it('should initialize to model', function() { expect(binding('text')).toEqual('me@example.com'); - expect(binding('myForm.input.valid')).toEqual('true'); + expect(binding('myForm.input.$valid')).toEqual('true'); }); it('should be invalid if empty', function() { input('text').enter(''); expect(binding('text')).toEqual(''); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); it('should be invalid if not email', function() { input('text').enter('xxx'); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.input.$valid')).toEqual('false'); }); </doc:scenario> </doc:example> @@ -370,12 +370,12 @@ function isEmpty(value) { function textInputType(scope, element, attr, ctrl) { element.bind('blur', function() { scope.$apply(function() { - ctrl.setViewValue(trim(element.val())); + ctrl.$setViewValue(trim(element.val())); }); }); - ctrl.render = function() { - element.val(isEmpty(ctrl.viewValue) ? '' : ctrl.viewValue); + ctrl.$render = function() { + element.val(isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue); }; // pattern validator @@ -384,10 +384,10 @@ function textInputType(scope, element, attr, ctrl) { var validate = function(regexp, value) { if (isEmpty(value) || regexp.test(value)) { - ctrl.setValidity('PATTERN', true); + ctrl.$setValidity('PATTERN', true); return value; } else { - ctrl.setValidity('PATTERN', false); + ctrl.$setValidity('PATTERN', false); return undefined; } }; @@ -409,8 +409,8 @@ function textInputType(scope, element, attr, ctrl) { }; } - ctrl.formatters.push(patternValidator); - ctrl.parsers.push(patternValidator); + ctrl.$formatters.push(patternValidator); + ctrl.$parsers.push(patternValidator); } // min length validator @@ -418,16 +418,16 @@ function textInputType(scope, element, attr, ctrl) { var minlength = parseInt(attr.ngMinlength, 10); var minLengthValidator = function(value) { if (!isEmpty(value) && value.length < minlength) { - ctrl.setValidity('MINLENGTH', false); + ctrl.$setValidity('MINLENGTH', false); return undefined; } else { - ctrl.setValidity('MINLENGTH', true); + ctrl.$setValidity('MINLENGTH', true); return value; } }; - ctrl.parsers.push(minLengthValidator); - ctrl.formatters.push(minLengthValidator); + ctrl.$parsers.push(minLengthValidator); + ctrl.$formatters.push(minLengthValidator); } // max length validator @@ -435,34 +435,34 @@ function textInputType(scope, element, attr, ctrl) { var maxlength = parseInt(attr.ngMaxlength, 10); var maxLengthValidator = function(value) { if (!isEmpty(value) && value.length > maxlength) { - ctrl.setValidity('MAXLENGTH', false); + ctrl.$setValidity('MAXLENGTH', false); return undefined; } else { - ctrl.setValidity('MAXLENGTH', true); + ctrl.$setValidity('MAXLENGTH', true); return value; } }; - ctrl.parsers.push(maxLengthValidator); - ctrl.formatters.push(maxLengthValidator); + ctrl.$parsers.push(maxLengthValidator); + ctrl.$formatters.push(maxLengthValidator); } }; function numberInputType(scope, element, attr, ctrl) { textInputType(scope, element, attr, ctrl); - ctrl.parsers.push(function(value) { + ctrl.$parsers.push(function(value) { var empty = isEmpty(value); if (empty || NUMBER_REGEXP.test(value)) { - ctrl.setValidity('NUMBER', true); + ctrl.$setValidity('NUMBER', true); return value === '' ? null : (empty ? value : parseFloat(value)); } else { - ctrl.setValidity('NUMBER', false); + ctrl.$setValidity('NUMBER', false); return undefined; } }); - ctrl.formatters.push(function(value) { + ctrl.$formatters.push(function(value) { return isEmpty(value) ? '' : '' + value; }); @@ -470,41 +470,41 @@ function numberInputType(scope, element, attr, ctrl) { var min = parseFloat(attr.min); var minValidator = function(value) { if (!isEmpty(value) && value < min) { - ctrl.setValidity('MIN', false); + ctrl.$setValidity('MIN', false); return undefined; } else { - ctrl.setValidity('MIN', true); + ctrl.$setValidity('MIN', true); return value; } }; - ctrl.parsers.push(minValidator); - ctrl.formatters.push(minValidator); + ctrl.$parsers.push(minValidator); + ctrl.$formatters.push(minValidator); } if (attr.max) { var max = parseFloat(attr.max); var maxValidator = function(value) { if (!isEmpty(value) && value > max) { - ctrl.setValidity('MAX', false); + ctrl.$setValidity('MAX', false); return undefined; } else { - ctrl.setValidity('MAX', true); + ctrl.$setValidity('MAX', true); return value; } }; - ctrl.parsers.push(maxValidator); - ctrl.formatters.push(maxValidator); + ctrl.$parsers.push(maxValidator); + ctrl.$formatters.push(maxValidator); } - ctrl.formatters.push(function(value) { + ctrl.$formatters.push(function(value) { if (isEmpty(value) || isNumber(value)) { - ctrl.setValidity('NUMBER', true); + ctrl.$setValidity('NUMBER', true); return value; } else { - ctrl.setValidity('NUMBER', false); + ctrl.$setValidity('NUMBER', false); return undefined; } }); @@ -515,16 +515,16 @@ function urlInputType(scope, element, attr, ctrl) { var urlValidator = function(value) { if (isEmpty(value) || URL_REGEXP.test(value)) { - ctrl.setValidity('URL', true); + ctrl.$setValidity('URL', true); return value; } else { - ctrl.setValidity('URL', false); + ctrl.$setValidity('URL', false); return undefined; } }; - ctrl.formatters.push(urlValidator); - ctrl.parsers.push(urlValidator); + ctrl.$formatters.push(urlValidator); + ctrl.$parsers.push(urlValidator); } function emailInputType(scope, element, attr, ctrl) { @@ -532,16 +532,16 @@ function emailInputType(scope, element, attr, ctrl) { var emailValidator = function(value) { if (isEmpty(value) || EMAIL_REGEXP.test(value)) { - ctrl.setValidity('EMAIL', true); + ctrl.$setValidity('EMAIL', true); return value; } else { - ctrl.setValidity('EMAIL', false); + ctrl.$setValidity('EMAIL', false); return undefined; } }; - ctrl.formatters.push(emailValidator); - ctrl.parsers.push(emailValidator); + ctrl.$formatters.push(emailValidator); + ctrl.$parsers.push(emailValidator); } function radioInputType(scope, element, attr, ctrl) { @@ -551,14 +551,14 @@ function radioInputType(scope, element, attr, ctrl) { element.bind('click', function() { if (element[0].checked) { scope.$apply(function() { - ctrl.setViewValue(attr.value); + ctrl.$setViewValue(attr.value); }); }; }); - ctrl.render = function() { + ctrl.$render = function() { var value = attr.value; - element[0].checked = isDefined(value) && (value == ctrl.viewValue); + element[0].checked = isDefined(value) && (value == ctrl.$viewValue); }; } @@ -571,19 +571,19 @@ function checkboxInputType(scope, element, attr, ctrl) { element.bind('click', function() { scope.$apply(function() { - ctrl.setViewValue(element[0].checked); + ctrl.$setViewValue(element[0].checked); }); }); - ctrl.render = function() { - element[0].checked = ctrl.viewValue; + ctrl.$render = function() { + element[0].checked = ctrl.$viewValue; }; - ctrl.formatters.push(function(value) { + ctrl.$formatters.push(function(value) { return value === trueValue; }); - ctrl.parsers.push(function(value) { + ctrl.$parsers.push(function(value) { return value ? trueValue : falseValue; }); } @@ -646,63 +646,63 @@ function checkboxInputType(scope, element, attr, ctrl) { <div ng-controller="Ctrl"> <form name="myForm"> User name: <input type="text" name="userName" ng-model="user.name" required> - <span class="error" ng-show="myForm.userName.error.REQUIRED"> + <span class="error" ng-show="myForm.userName.$error.REQUIRED"> Required!</span><br> Last name: <input type="text" name="lastName" ng-model="user.last" ng-minlength="3" ng-maxlength="10"> - <span class="error" ng-show="myForm.lastName.error.MINLENGTH"> + <span class="error" ng-show="myForm.lastName.$error.MINLENGTH"> Too short!</span> - <span class="error" ng-show="myForm.lastName.error.MAXLENGTH"> + <span class="error" ng-show="myForm.lastName.$error.MAXLENGTH"> Too long!</span><br> </form> <hr> <tt>user = {{user}}</tt><br/> - <tt>myForm.userName.valid = {{myForm.userName.valid}}</tt><br> - <tt>myForm.userName.error = {{myForm.userName.error}}</tt><br> - <tt>myForm.lastName.valid = {{myForm.lastName.valid}}</tt><br> - <tt>myForm.userName.error = {{myForm.lastName.error}}</tt><br> - <tt>myForm.valid = {{myForm.valid}}</tt><br> - <tt>myForm.error.REQUIRED = {{!!myForm.error.REQUIRED}}</tt><br> - <tt>myForm.error.MINLENGTH = {{!!myForm.error.MINLENGTH}}</tt><br> - <tt>myForm.error.MAXLENGTH = {{!!myForm.error.MAXLENGTH}}</tt><br> + <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br> + <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br> + <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br> + <tt>myForm.userName.$error = {{myForm.lastName.$error}}</tt><br> + <tt>myForm.$valid = {{myForm.$valid}}</tt><br> + <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br> + <tt>myForm.$error.MINLENGTH = {{!!myForm.$error.MINLENGTH}}</tt><br> + <tt>myForm.$error.MAXLENGTH = {{!!myForm.$error.MAXLENGTH}}</tt><br> </div> </doc:source> <doc:scenario> it('should initialize to model', function() { expect(binding('user')).toEqual('{"last":"visitor","name":"guest"}'); - expect(binding('myForm.userName.valid')).toEqual('true'); - expect(binding('myForm.valid')).toEqual('true'); + expect(binding('myForm.userName.$valid')).toEqual('true'); + expect(binding('myForm.$valid')).toEqual('true'); }); it('should be invalid if empty when required', function() { input('user.name').enter(''); expect(binding('user')).toEqual('{"last":"visitor"}'); - expect(binding('myForm.userName.valid')).toEqual('false'); - expect(binding('myForm.valid')).toEqual('false'); + expect(binding('myForm.userName.$valid')).toEqual('false'); + expect(binding('myForm.$valid')).toEqual('false'); }); it('should be valid if empty when min length is set', function() { input('user.last').enter(''); expect(binding('user')).toEqual('{"last":"","name":"guest"}'); - expect(binding('myForm.lastName.valid')).toEqual('true'); - expect(binding('myForm.valid')).toEqual('true'); + expect(binding('myForm.lastName.$valid')).toEqual('true'); + expect(binding('myForm.$valid')).toEqual('true'); }); it('should be invalid if less than required min length', function() { input('user.last').enter('xx'); expect(binding('user')).toEqual('{"name":"guest"}'); - expect(binding('myForm.lastName.valid')).toEqual('false'); - expect(binding('myForm.lastName.error')).toMatch(/MINLENGTH/); - expect(binding('myForm.valid')).toEqual('false'); + expect(binding('myForm.lastName.$valid')).toEqual('false'); + expect(binding('myForm.lastName.$error')).toMatch(/MINLENGTH/); + expect(binding('myForm.$valid')).toEqual('false'); }); it('should be invalid if longer than max length', function() { input('user.last').enter('some ridiculously long name'); expect(binding('user')) .toEqual('{"name":"guest"}'); - expect(binding('myForm.lastName.valid')).toEqual('false'); - expect(binding('myForm.lastName.error')).toMatch(/MAXLENGTH/); - expect(binding('myForm.valid')).toEqual('false'); + expect(binding('myForm.lastName.$valid')).toEqual('false'); + expect(binding('myForm.lastName.$error')).toMatch(/MAXLENGTH/); + expect(binding('myForm.$valid')).toEqual('false'); }); </doc:scenario> </doc:example> @@ -729,7 +729,7 @@ var inputDirective = [function() { * @property {Array.<Function>} parsers Whenever the widget reads value from the DOM, it executes * all of these functions to sanitize / convert the value as well as validate. * - * @property {Array.<Function>} formatters Wheneveer the model value changes, it executes all of + * @property {Array.<Function>} formatters Whenever the model value changes, it executes all of * these functions to convert the value as well as validate. * * @property {Object} error An bject hash with all errors as keys. @@ -744,23 +744,23 @@ var inputDirective = [function() { */ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', function($scope, $exceptionHandler, $attr, ngModel) { - this.viewValue = Number.NaN; - this.modelValue = Number.NaN; - this.parsers = []; - this.formatters = []; - this.viewChangeListeners = []; - this.error = {}; - this.pristine = true; - this.dirty = false; - this.valid = true; - this.invalid = false; - this.render = noop; - this.name = $attr.name; + this.$viewValue = Number.NaN; + this.$modelValue = Number.NaN; + this.$parsers = []; + this.$formatters = []; + this.$viewChangeListeners = []; + this.$error = {}; + this.$pristine = true; + this.$dirty = false; + this.$valid = true; + this.$invalid = false; + this.$render = noop; + this.$name = $attr.name; /** * @ngdoc function - * @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController#setValidity + * @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setValidity * @methodOf angular.module.ng.$compileProvider.directive.ng-model.NgModelController * * @description @@ -772,21 +772,21 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', * @param {string} validationToken Name of the validator. * @param {boolean} isValid Whether the current state is valid (true) or invalid (false). */ - this.setValidity = function(validationToken, isValid) { + this.$setValidity = function(validationToken, isValid) { - if (!isValid && this.error[validationToken]) return; - if (isValid && !this.error[validationToken]) return; + if (!isValid && this.$error[validationToken]) return; + if (isValid && !this.$error[validationToken]) return; if (isValid) { - delete this.error[validationToken]; - if (equals(this.error, {})) { - this.valid = true; - this.invalid = false; + delete this.$error[validationToken]; + if (equals(this.$error, {})) { + this.$valid = true; + this.$invalid = false; } } else { - this.error[validationToken] = true; - this.invalid = true; - this.valid = false; + this.$error[validationToken] = true; + this.$invalid = true; + this.$valid = false; } if (this.$form) { @@ -797,7 +797,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', /** * @ngdoc function - * @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController#setViewValue + * @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setViewValue * @methodOf angular.module.ng.$compileProvider.directive.ng-model.NgModelController * * @description @@ -812,24 +812,24 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', * * @param {string} value Value from the view. */ - this.setViewValue = function(value) { - this.viewValue = value; + this.$setViewValue = function(value) { + this.$viewValue = value; // change to dirty - if (this.pristine) { - this.dirty = true; - this.pristine = false; + if (this.$pristine) { + this.$dirty = true; + this.$pristine = false; if (this.$form) this.$form.$setDirty(); } - forEach(this.parsers, function(fn) { + forEach(this.$parsers, function(fn) { value = fn(value); }); - if (this.modelValue !== value) { - this.modelValue = value; + if (this.$modelValue !== value) { + this.$modelValue = value; ngModel(value); - forEach(this.viewChangeListeners, function(listener) { + forEach(this.$viewChangeListeners, function(listener) { try { listener(); } catch(e) { @@ -846,19 +846,19 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', }, function(value) { // ignore change from view - if (ctrl.modelValue === value) return; + if (ctrl.$modelValue === value) return; - var formatters = ctrl.formatters, + var formatters = ctrl.$formatters, idx = formatters.length; - ctrl.modelValue = value; + ctrl.$modelValue = value; while(idx--) { value = formatters[idx](value); } - if (ctrl.viewValue !== value) { - ctrl.viewValue = value; - ctrl.render(); + if (ctrl.$viewValue !== value) { + ctrl.$viewValue = value; + ctrl.$render(); } }); }]; @@ -915,7 +915,7 @@ var ngModelDirective = [function() { forEach(['valid', 'invalid', 'pristine', 'dirty'], function(name) { scope.$watch(function() { - return modelCtrl[name]; + return modelCtrl['$' + name]; }, function(value) { element[value ? 'addClass' : 'removeClass']('ng-' + name); }); @@ -980,7 +980,7 @@ var ngModelDirective = [function() { var ngChangeDirective = valueFn({ require: 'ngModel', link: function(scope, element, attr, ctrl) { - ctrl.viewChangeListeners.push(function() { + ctrl.$viewChangeListeners.push(function() { scope.$eval(attr.ngChange); }); } @@ -1025,7 +1025,7 @@ var ngModelInstantDirective = ['$browser', function($browser) { link: function(scope, element, attr, ctrl) { var handler = function() { scope.$apply(function() { - ctrl.setViewValue(trim(element.val())); + ctrl.$setViewValue(trim(element.val())); }); }; @@ -1058,19 +1058,19 @@ var requiredDirective = [function() { var validator = function(value) { if (attr.required && (isEmpty(value) || value === false)) { - ctrl.setValidity('REQUIRED', false); + ctrl.$setValidity('REQUIRED', false); return; } else { - ctrl.setValidity('REQUIRED', true); + ctrl.$setValidity('REQUIRED', true); return value; } }; - ctrl.formatters.push(validator); - ctrl.parsers.unshift(validator); + ctrl.$formatters.push(validator); + ctrl.$parsers.unshift(validator); attr.$observe('required', function() { - validator(ctrl.viewValue); + validator(ctrl.$viewValue); }); } }; @@ -1095,26 +1095,26 @@ var requiredDirective = [function() { } </script> <form name="myForm" ng-controller="Ctrl"> - List: <input name="input" ng-model="names" ng-list required> - <span class="error" ng-show="myForm.list.error.REQUIRED"> + List: <input name="namesInput" ng-model="names" ng-list required> + <span class="error" ng-show="myForm.list.$error.REQUIRED"> Required!</span> <tt>names = {{names}}</tt><br/> - <tt>myForm.input.valid = {{myForm.input.valid}}</tt><br/> - <tt>myForm.input.error = {{myForm.input.error}}</tt><br/> - <tt>myForm.valid = {{myForm.valid}}</tt><br/> - <tt>myForm.error.REQUIRED = {{!!myForm.error.REQUIRED}}</tt><br/> + <tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/> + <tt>myForm.namesInput.$error = {{myForm.namesInput.$error}}</tt><br/> + <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> + <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br/> </form> </doc:source> <doc:scenario> it('should initialize to model', function() { expect(binding('names')).toEqual('["igor","misko","vojta"]'); - expect(binding('myForm.input.valid')).toEqual('true'); + expect(binding('myForm.namesInput.$valid')).toEqual('true'); }); it('should be invalid if empty', function() { input('names').enter(''); expect(binding('names')).toEqual('[]'); - expect(binding('myForm.input.valid')).toEqual('false'); + expect(binding('myForm.namesInput.$valid')).toEqual('false'); }); </doc:scenario> </doc:example> @@ -1135,9 +1135,9 @@ var ngListDirective = function() { return list; }; - ctrl.parsers.push(parse); - ctrl.formatters.push(function(value) { - if (isArray(value) && !equals(parse(ctrl.viewValue), value)) { + ctrl.$parsers.push(parse); + ctrl.$formatters.push(function(value) { + if (isArray(value) && !equals(parse(ctrl.$viewValue), value)) { return value.join(', '); } diff --git a/src/directive/select.js b/src/directive/select.js index e5d619b9..2c6ef15b 100644 --- a/src/directive/select.js +++ b/src/directive/select.js @@ -140,15 +140,15 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) { // required validator if (multiple && (attr.required || attr.ngRequired)) { var requiredValidator = function(value) { - ctrl.setValidity('REQUIRED', !attr.required || (value && value.length)); + ctrl.$setValidity('REQUIRED', !attr.required || (value && value.length)); return value; }; - ctrl.parsers.push(requiredValidator); - ctrl.formatters.unshift(requiredValidator); + ctrl.$parsers.push(requiredValidator); + ctrl.$formatters.unshift(requiredValidator); attr.$observe('required', function() { - requiredValidator(ctrl.viewValue); + requiredValidator(ctrl.$viewValue); }); } @@ -162,20 +162,20 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) { function Single(scope, selectElement, ctrl) { - ctrl.render = function() { - selectElement.val(ctrl.viewValue); + ctrl.$render = function() { + selectElement.val(ctrl.$viewValue); }; selectElement.bind('change', function() { scope.$apply(function() { - ctrl.setViewValue(selectElement.val()); + ctrl.$setViewValue(selectElement.val()); }); }); } function Multiple(scope, selectElement, ctrl) { - ctrl.render = function() { - var items = new HashMap(ctrl.viewValue); + ctrl.$render = function() { + var items = new HashMap(ctrl.$viewValue); forEach(selectElement.children(), function(option) { option.selected = isDefined(items.get(option.value)); }); @@ -189,7 +189,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) { array.push(option.value); } }); - ctrl.setViewValue(array); + ctrl.$setViewValue(array); }); }); } @@ -266,11 +266,11 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) { value = valueFn(scope, locals); } } - ctrl.setViewValue(value); + ctrl.$setViewValue(value); }); }); - ctrl.render = render; + ctrl.$render = render; // TODO(vojta): can't we optimize this ? scope.$watch(render); @@ -282,7 +282,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) { optionGroup, option, existingParent, existingOptions, existingOption, - modelValue = ctrl.modelValue, + modelValue = ctrl.$modelValue, values = valuesFn(scope) || [], keys = keyName ? sortedKeys(values) : values, groupLength, length, diff --git a/test/directive/formSpec.js b/test/directive/formSpec.js index c5e305d3..b1859d44 100644 --- a/test/directive/formSpec.js +++ b/test/directive/formSpec.js @@ -1,14 +1,14 @@ 'use strict'; describe('form', function() { - var doc, widget, scope, $compile; + var doc, control, scope, $compile; beforeEach(module(function($compileProvider) { $compileProvider.directive('storeModelCtrl', function() { return { require: 'ngModel', link: function(scope, elm, attr, ctrl) { - widget = ctrl; + control = ctrl; } }; }); @@ -33,17 +33,17 @@ describe('form', function() { it('should remove the widget when element removed', function() { doc = $compile( - '<form name="form">' + + '<form name="myForm">' + '<input type="text" name="alias" ng-model="value" store-model-ctrl/>' + '</form>')(scope); - var form = scope.form; - widget.setValidity('REQUIRED', false); - expect(form.alias).toBe(widget); - expect(form.error.REQUIRED).toEqual([widget]); + var form = scope.myForm; + control.$setValidity('REQUIRED', false); + expect(form.alias).toBe(control); + expect(form.$error.REQUIRED).toEqual([control]); doc.find('input').remove(); - expect(form.error.REQUIRED).toBeUndefined(); + expect(form.$error.REQUIRED).toBeUndefined(); expect(form.alias).toBeUndefined(); }); @@ -98,22 +98,22 @@ describe('form', function() { doc = jqLite( '<ng:form name="parent">' + '<ng:form name="child">' + - '<input type="text" ng:model="text" name="text">' + + '<input ng:model="modelA" name="inputA">' + '</ng:form>' + '</ng:form>'); $compile(doc)(scope); var parent = scope.parent; var child = scope.child; - var input = child.text; + var input = child.inputA; - input.setValidity('MyError', false); - expect(parent.error.MyError).toEqual([child]); - expect(child.error.MyError).toEqual([input]); + input.$setValidity('MyError', false); + expect(parent.$error.MyError).toEqual([child]); + expect(child.$error.MyError).toEqual([input]); - input.setValidity('MyError', true); - expect(parent.error.MyError).toBeUndefined(); - expect(child.error.MyError).toBeUndefined(); + input.$setValidity('MyError', true); + expect(parent.$error.MyError).toBeUndefined(); + expect(child.$error.MyError).toBeUndefined(); }); @@ -131,10 +131,10 @@ describe('form', function() { scope.$apply(); - expect(scope.formA.error.REQUIRED.length).toBe(1); - expect(scope.formA.error.REQUIRED).toEqual([scope.formA.firstName]); - expect(scope.formB.error.REQUIRED.length).toBe(1); - expect(scope.formB.error.REQUIRED).toEqual([scope.formB.lastName]); + expect(scope.formA.$error.REQUIRED.length).toBe(1); + expect(scope.formA.$error.REQUIRED).toEqual([scope.formA.firstName]); + expect(scope.formB.$error.REQUIRED.length).toBe(1); + expect(scope.formB.$error.REQUIRED).toEqual([scope.formB.lastName]); var inputA = doc.find('input').eq(0), inputB = doc.find('input').eq(1); @@ -147,8 +147,8 @@ describe('form', function() { expect(scope.firstName).toBe('val1'); expect(scope.lastName).toBe('val2'); - expect(scope.formA.error.REQUIRED).toBeUndefined(); - expect(scope.formB.error.REQUIRED).toBeUndefined(); + expect(scope.formA.$error.REQUIRED).toBeUndefined(); + expect(scope.formB.$error.REQUIRED).toBeUndefined(); }); @@ -173,14 +173,14 @@ describe('form', function() { expect(child).toBeDefined(); expect(input).toBeDefined(); - input.setValidity('myRule', false); - expect(input.error.myRule).toEqual(true); - expect(child.error.myRule).toEqual([input]); - expect(parent.error.myRule).toEqual([child]); + input.$setValidity('myRule', false); + expect(input.$error.myRule).toEqual(true); + expect(child.$error.myRule).toEqual([input]); + expect(parent.$error.myRule).toEqual([child]); - input.setValidity('myRule', true); - expect(parent.error.myRule).toBeUndefined(); - expect(child.error.myRule).toBeUndefined(); + input.$setValidity('myRule', true); + expect(parent.$error.myRule).toBeUndefined(); + expect(child.$error.myRule).toBeUndefined(); }); @@ -190,10 +190,10 @@ describe('form', function() { var widget = scope.form.w1; expect(widget).toBeDefined(); - expect(widget.pristine).toBe(true); - expect(widget.dirty).toBe(false); - expect(widget.valid).toBe(true); - expect(widget.invalid).toBe(false); + expect(widget.$pristine).toBe(true); + expect(widget.$dirty).toBe(false); + expect(widget.$valid).toBe(true); + expect(widget.$invalid).toBe(false); }); @@ -202,7 +202,7 @@ describe('form', function() { beforeEach(function() { doc = $compile( '<form name="form">' + - '<input type="text" ng-model="name" name="name" store-model-ctrl/>' + + '<input ng-model="name" name="name" store-model-ctrl/>' + '</form>')(scope); scope.$digest(); @@ -212,18 +212,18 @@ describe('form', function() { it('should have ng-valid/ng-invalid css class', function() { expect(doc).toBeValid(); - widget.setValidity('ERROR', false); + control.$setValidity('ERROR', false); scope.$apply(); expect(doc).toBeInvalid(); - widget.setValidity('ANOTHER', false); + control.$setValidity('ANOTHER', false); scope.$apply(); - widget.setValidity('ERROR', true); + control.$setValidity('ERROR', true); scope.$apply(); expect(doc).toBeInvalid(); - widget.setValidity('ANOTHER', true); + control.$setValidity('ANOTHER', true); scope.$apply(); expect(doc).toBeValid(); }); @@ -232,7 +232,7 @@ describe('form', function() { it('should have ng-pristine/ng-dirty css class', function() { expect(doc).toBePristine(); - widget.setViewValue(''); + control.$setViewValue(''); scope.$apply(); expect(doc).toBeDirty(); }); diff --git a/test/directive/inputSpec.js b/test/directive/inputSpec.js index 724b9fbe..108ef5c3 100644 --- a/test/directive/inputSpec.js +++ b/test/directive/inputSpec.js @@ -19,18 +19,18 @@ describe('NgModelController', function() { 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.$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(); + expect(ctrl.$viewValue).toBeDefined(); + expect(ctrl.$modelValue).toBeDefined(); - expect(ctrl.formatters).toEqual([]); - expect(ctrl.parsers).toEqual([]); + expect(ctrl.$formatters).toEqual([]); + expect(ctrl.$parsers).toEqual([]); - expect(ctrl.name).toBe('testAlias'); + expect(ctrl.$name).toBe('testAlias'); }); @@ -40,40 +40,40 @@ describe('NgModelController', function() { var spy = jasmine.createSpy('setValidity'); ctrl.$form = {$setValidity: spy}; - ctrl.setValidity('ERROR', false); + ctrl.$setValidity('ERROR', false); expect(spy).toHaveBeenCalledOnceWith('ERROR', false, ctrl); spy.reset(); - ctrl.setValidity('ERROR', false); + ctrl.$setValidity('ERROR', false); expect(spy).not.toHaveBeenCalled(); }); it('should set and unset the error', function() { - ctrl.setValidity('REQUIRED', false); - expect(ctrl.error.REQUIRED).toBe(true); + ctrl.$setValidity('REQUIRED', false); + expect(ctrl.$error.REQUIRED).toBe(true); - ctrl.setValidity('REQUIRED', true); - expect(ctrl.error.REQUIRED).toBeUndefined(); + ctrl.$setValidity('REQUIRED', true); + expect(ctrl.$error.REQUIRED).toBeUndefined(); }); it('should set valid/invalid', function() { - ctrl.setValidity('FIRST', false); - expect(ctrl.valid).toBe(false); - expect(ctrl.invalid).toBe(true); + ctrl.$setValidity('FIRST', false); + expect(ctrl.$valid).toBe(false); + expect(ctrl.$invalid).toBe(true); - ctrl.setValidity('SECOND', false); - expect(ctrl.valid).toBe(false); - expect(ctrl.invalid).toBe(true); + ctrl.$setValidity('SECOND', false); + expect(ctrl.$valid).toBe(false); + expect(ctrl.$invalid).toBe(true); - ctrl.setValidity('SECOND', true); - expect(ctrl.valid).toBe(false); - expect(ctrl.invalid).toBe(true); + ctrl.$setValidity('SECOND', true); + expect(ctrl.$valid).toBe(false); + expect(ctrl.$invalid).toBe(true); - ctrl.setValidity('FIRST', true); - expect(ctrl.valid).toBe(true); - expect(ctrl.invalid).toBe(false); + ctrl.$setValidity('FIRST', true); + expect(ctrl.$valid).toBe(true); + expect(ctrl.$invalid).toBe(false); }); @@ -81,13 +81,13 @@ describe('NgModelController', function() { var spy = jasmine.createSpy('setValidity'); ctrl.$form = {$setValidity: spy}; - ctrl.setValidity('ERROR', true); + ctrl.$setValidity('ERROR', true); expect(spy).not.toHaveBeenCalled(); - ctrl.setValidity('ERROR', false); + ctrl.$setValidity('ERROR', false); expect(spy).toHaveBeenCalledOnceWith('ERROR', false, ctrl); spy.reset(); - ctrl.setValidity('ERROR', true); + ctrl.$setValidity('ERROR', true); expect(spy).toHaveBeenCalledOnceWith('ERROR', true, ctrl); }); }); @@ -96,54 +96,54 @@ describe('NgModelController', function() { describe('view -> model', function() { it('should set the value to $viewValue', function() { - ctrl.setViewValue('some-val'); - expect(ctrl.viewValue).toBe('some-val'); + ctrl.$setViewValue('some-val'); + expect(ctrl.$viewValue).toBe('some-val'); }); it('should pipeline all registered parsers and set result to $modelValue', function() { var log = []; - ctrl.parsers.push(function(value) { + ctrl.$parsers.push(function(value) { log.push(value); return value + '-a'; }); - ctrl.parsers.push(function(value) { + ctrl.$parsers.push(function(value) { log.push(value); return value + '-b'; }); - ctrl.setViewValue('init'); + ctrl.$setViewValue('init'); expect(log).toEqual(['init', 'init-a']); - expect(ctrl.modelValue).toBe('init-a-b'); + expect(ctrl.$modelValue).toBe('init-a-b'); }); it('should fire viewChangeListeners when the value changes in the view (even if invalid)', function() { var spy = jasmine.createSpy('viewChangeListener'); - ctrl.viewChangeListeners.push(spy); - ctrl.setViewValue('val'); + ctrl.$viewChangeListeners.push(spy); + ctrl.$setViewValue('val'); expect(spy).toHaveBeenCalledOnce(); spy.reset(); // invalid - ctrl.parsers.push(function() {return undefined;}); - ctrl.setViewValue('val'); + ctrl.$parsers.push(function() {return undefined;}); + ctrl.$setViewValue('val'); expect(spy).toHaveBeenCalledOnce(); }); it('should reset the model when the view is invalid', function() { - ctrl.setViewValue('aaaa'); - expect(ctrl.modelValue).toBe('aaaa'); + ctrl.$setViewValue('aaaa'); + expect(ctrl.$modelValue).toBe('aaaa'); // add a validator that will make any input invalid - ctrl.parsers.push(function() {return undefined;}); - expect(ctrl.modelValue).toBe('aaaa'); - ctrl.setViewValue('bbbb'); - expect(ctrl.modelValue).toBeUndefined; + ctrl.$parsers.push(function() {return undefined;}); + expect(ctrl.$modelValue).toBe('aaaa'); + ctrl.$setViewValue('bbbb'); + expect(ctrl.$modelValue).toBeUndefined; }); @@ -151,15 +151,15 @@ describe('NgModelController', function() { var spy = jasmine.createSpy('setDirty'); ctrl.$form = {$setDirty: spy}; - ctrl.setViewValue(''); - expect(ctrl.pristine).toBe(false); - expect(ctrl.dirty).toBe(true); + ctrl.$setViewValue(''); + expect(ctrl.$pristine).toBe(false); + expect(ctrl.$dirty).toBe(true); expect(spy).toHaveBeenCalledOnce(); spy.reset(); - ctrl.setViewValue(''); - expect(ctrl.pristine).toBe(false); - expect(ctrl.dirty).toBe(true); + ctrl.$setViewValue(''); + expect(ctrl.$pristine).toBe(false); + expect(ctrl.$dirty).toBe(true); expect(spy).not.toHaveBeenCalled(); }); }); @@ -171,7 +171,7 @@ describe('NgModelController', function() { scope.$apply(function() { scope.value = 10; }); - expect(ctrl.modelValue).toBe(10); + expect(ctrl.$modelValue).toBe(10); }); @@ -179,12 +179,12 @@ describe('NgModelController', function() { function() { var log = []; - ctrl.formatters.unshift(function(value) { + ctrl.$formatters.unshift(function(value) { log.push(value); return value + 2; }); - ctrl.formatters.unshift(function(value) { + ctrl.$formatters.unshift(function(value) { log.push(value); return value + ''; }); @@ -193,35 +193,35 @@ describe('NgModelController', function() { scope.value = 3; }); expect(log).toEqual([3, 5]); - expect(ctrl.viewValue).toBe('5'); + expect(ctrl.$viewValue).toBe('5'); }); it('should $render only if value changed', function() { - spyOn(ctrl, 'render'); + spyOn(ctrl, '$render'); scope.$apply(function() { scope.value = 3; }); - expect(ctrl.render).toHaveBeenCalledOnce(); - ctrl.render.reset(); + expect(ctrl.$render).toHaveBeenCalledOnce(); + ctrl.$render.reset(); - ctrl.formatters.push(function() {return 3;}); + ctrl.$formatters.push(function() {return 3;}); scope.$apply(function() { scope.value = 5; }); - expect(ctrl.render).not.toHaveBeenCalled(); + expect(ctrl.$render).not.toHaveBeenCalled(); }); it('should clear the view even if invalid', function() { - spyOn(ctrl, 'render'); + spyOn(ctrl, '$render'); - ctrl.formatters.push(function() {return undefined;}); + ctrl.$formatters.push(function() {return undefined;}); scope.$apply(function() { scope.value = 5; }); - expect(ctrl.render).toHaveBeenCalledOnce(); + expect(ctrl.$render).toHaveBeenCalledOnce(); }); }); }); @@ -296,10 +296,10 @@ describe('input', function() { compileInput('<input ng-model="name" name="alias" required>'); scope.$apply(); - expect(scope.form.error.REQUIRED.length).toBe(1); + expect(scope.form.$error.REQUIRED.length).toBe(1); inputElm.remove(); - expect(scope.form.error.REQUIRED).toBeUndefined(); + expect(scope.form.$error.REQUIRED).toBeUndefined(); }); @@ -535,12 +535,12 @@ describe('input', function() { changeInputValueTo('1'); expect(inputElm).toBeInvalid(); expect(scope.value).toBeFalsy(); - expect(scope.form.alias.error.MIN).toBeTruthy(); + expect(scope.form.alias.$error.MIN).toBeTruthy(); changeInputValueTo('100'); expect(inputElm).toBeValid(); expect(scope.value).toBe(100); - expect(scope.form.alias.error.MIN).toBeFalsy(); + expect(scope.form.alias.$error.MIN).toBeFalsy(); }); }); @@ -554,12 +554,12 @@ describe('input', function() { changeInputValueTo('20'); expect(inputElm).toBeInvalid(); expect(scope.value).toBeFalsy(); - expect(scope.form.alias.error.MAX).toBeTruthy(); + expect(scope.form.alias.$error.MAX).toBeTruthy(); changeInputValueTo('0'); expect(inputElm).toBeValid(); expect(scope.value).toBe(0); - expect(scope.form.alias.error.MAX).toBeFalsy(); + expect(scope.form.alias.$error.MAX).toBeFalsy(); }); }); @@ -572,7 +572,7 @@ describe('input', function() { changeInputValueTo('0'); expect(inputElm).toBeValid(); expect(scope.value).toBe(0); - expect(scope.form.alias.error.REQUIRED).toBeFalsy(); + expect(scope.form.alias.$error.REQUIRED).toBeFalsy(); }); it('should be valid even if value 0 is set from model', function() { @@ -584,7 +584,7 @@ describe('input', function() { expect(inputElm).toBeValid(); expect(inputElm.val()).toBe('0') - expect(scope.form.alias.error.REQUIRED).toBeFalsy(); + expect(scope.form.alias.$error.REQUIRED).toBeFalsy(); }); }); }); @@ -599,12 +599,12 @@ describe('input', function() { expect(scope.email).toBe('vojta@google.com'); expect(inputElm).toBeValid(); - expect(widget.error.EMAIL).toBeUndefined(); + expect(widget.$error.EMAIL).toBeUndefined(); changeInputValueTo('invalid@'); expect(scope.email).toBeUndefined(); expect(inputElm).toBeInvalid(); - expect(widget.error.EMAIL).toBeTruthy(); + expect(widget.$error.EMAIL).toBeTruthy(); }); @@ -627,12 +627,12 @@ describe('input', function() { changeInputValueTo('http://www.something.com'); expect(scope.url).toBe('http://www.something.com'); expect(inputElm).toBeValid(); - expect(widget.error.URL).toBeUndefined(); + expect(widget.$error.URL).toBeUndefined(); changeInputValueTo('invalid.com'); expect(scope.url).toBeUndefined(); expect(inputElm).toBeInvalid(); - expect(widget.error.URL).toBeTruthy(); + expect(widget.$error.URL).toBeTruthy(); }); diff --git a/test/directive/selectSpec.js b/test/directive/selectSpec.js index 3b4f992e..c6cfa377 100644 --- a/test/directive/selectSpec.js +++ b/test/directive/selectSpec.js @@ -55,7 +55,7 @@ describe('select', function() { scope.selection = 'c'; }); - expect(scope.form.select.error.REQUIRED).toBeFalsy(); + expect(scope.form.select.$error.REQUIRED).toBeFalsy(); expect(element).toBeValid(); expect(element).toBePristine(); @@ -63,7 +63,7 @@ describe('select', function() { scope.selection = ''; }); - expect(scope.form.select.error.REQUIRED).toBeTruthy(); + expect(scope.form.select.$error.REQUIRED).toBeTruthy(); expect(element).toBeInvalid(); expect(element).toBePristine(); expect(scope.log).toEqual(''); @@ -117,7 +117,7 @@ describe('select', function() { scope.selection = []; }); - expect(scope.form.select.error.REQUIRED).toBeTruthy(); + expect(scope.form.select.$error.REQUIRED).toBeTruthy(); expect(element).toBeInvalid(); expect(element).toBePristine(); |