Skip to content

Commit

Permalink
fix(forms): prefix all form and control properties with $
Browse files Browse the repository at this point in the history
  • Loading branch information
@IgorMinar
IgorMinar committed Mar 13, 2012
1 parent 5e6ba25 commit f59e4b1
Show file tree
Hide file tree
Showing 8 changed files with 345 additions and 345 deletions.
2 changes: 1 addition & 1 deletion docs/content/cookbook/advancedform.ngdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
34 changes: 17 additions & 17 deletions docs/content/guide/dev_guide.forms.ngdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>

Expand Down Expand Up @@ -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.

Expand All @@ -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>
Expand All @@ -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;
}
});
Expand All @@ -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;
}
});
Expand Down Expand Up @@ -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());
});
});

Expand All @@ -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());
}
};
});
Expand Down
60 changes: 30 additions & 30 deletions src/directive/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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);
Expand All @@ -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);
};
Expand All @@ -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) {
Expand Down Expand Up @@ -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>
Expand All @@ -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);
});
Expand Down
Loading

0 comments on commit f59e4b1

Please sign in to comment.