aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/directive/form.js42
-rw-r--r--src/directive/input.js53
2 files changed, 66 insertions, 29 deletions
diff --git a/src/directive/form.js b/src/directive/form.js
index 6bb1b4d6..47274589 100644
--- a/src/directive/form.js
+++ b/src/directive/form.js
@@ -35,6 +35,7 @@ FormController.$inject = ['name', '$element', '$attrs'];
function FormController(name, element, attrs) {
var form = this,
parentForm = element.parent().inheritedData('$formController') || nullFormCtrl,
+ invalidCount = 0, // used to easily determine if we are valid
errors = form.$error = {};
// init state
@@ -49,11 +50,27 @@ function FormController(name, element, attrs) {
parentForm.$addControl(form);
+ // Setup initial state of the control
+ element.addClass(PRISTINE_CLASS);
+ toggleValidCss(true);
+
+ // convenience method for easy toggling of classes
+ function toggleValidCss(isValid, validationErrorKey) {
+ validationErrorKey = validationErrorKey ? '-' + snake_case(validationErrorKey, '-') : '';
+ element.
+ removeClass((isValid ? INVALID_CLASS : VALID_CLASS) + validationErrorKey).
+ addClass((isValid ? VALID_CLASS : INVALID_CLASS) + validationErrorKey);
+ }
+
+ if (parentForm) {
+ parentForm.$addControl(form);
+ }
+
form.$addControl = function(control) {
if (control.$name && !form.hasOwnProperty(control.$name)) {
form[control.$name] = control;
}
- }
+ };
form.$removeControl = function(control) {
if (control.$name && form[control.$name] === control) {
@@ -66,11 +83,15 @@ function FormController(name, element, attrs) {
if (isValid) {
cleanupControlErrors(errors[validationToken], validationToken, control);
- if (equals(errors, {})) {
+ if (!invalidCount) {
+ toggleValidCss(isValid);
form.$valid = true;
form.$invalid = false;
}
} else {
+ if (!invalidCount) {
+ toggleValidCss(isValid);
+ }
addControlError(validationToken, control);
form.$valid = false;
@@ -79,16 +100,19 @@ function FormController(name, element, attrs) {
};
form.$setDirty = function() {
+ element.removeClass(PRISTINE_CLASS).addClass(DIRTY_CLASS);
form.$dirty = true;
form.$pristine = false;
- }
+ };
function cleanupControlErrors(queue, validationToken, control) {
if (queue) {
control = control || this; // so that we can be used in forEach;
arrayRemove(queue, control);
if (!queue.length) {
- delete errors[validationToken];
+ invalidCount--;
+ errors[validationToken] = false;
+ toggleValidCss(true, validationToken);
parentForm.$setValidity(validationToken, true, form);
}
}
@@ -100,6 +124,8 @@ function FormController(name, element, attrs) {
if (includes(queue, control)) return;
} else {
errors[validationToken] = queue = [];
+ invalidCount++;
+ toggleValidCss(false, validationToken);
parentForm.$setValidity(validationToken, false, form);
}
queue.push(control);
@@ -211,14 +237,6 @@ var formDirective = [function() {
if (!attr.action) event.preventDefault();
});
- forEach(['valid', 'invalid', 'dirty', 'pristine'], function(name) {
- scope.$watch(function() {
- return controller['$' + name];
- }, function(value) {
- formElement[value ? 'addClass' : 'removeClass']('ng-' + name);
- });
- });
-
var parentFormCtrl = formElement.parent().inheritedData('$formController');
if (parentFormCtrl) {
formElement.bind('$destroy', function() {
diff --git a/src/directive/input.js b/src/directive/input.js
index a92ad306..740f3ba6 100644
--- a/src/directive/input.js
+++ b/src/directive/input.js
@@ -719,6 +719,10 @@ var inputDirective = [function() {
};
}];
+var VALID_CLASS = 'ng-valid',
+ INVALID_CLASS = 'ng-invalid',
+ PRISTINE_CLASS = 'ng-pristine',
+ DIRTY_CLASS = 'ng-dirty';
/**
* @ngdoc object
@@ -749,7 +753,6 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', '$e
this.$parsers = [];
this.$formatters = [];
this.$viewChangeListeners = [];
- this.$error = {};
this.$pristine = true;
this.$dirty = false;
this.$valid = true;
@@ -757,7 +760,22 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', '$e
this.$render = noop;
this.$name = $attr.name;
- var parentForm = $element.inheritedData('$formController') || nullFormCtrl;
+ var parentForm = $element.inheritedData('$formController') || nullFormCtrl,
+ invalidCount = 0, // used to easily determine if we are valid
+ $error = this.$error = {}; // keep invalid keys here
+
+
+ // Setup initial state of the control
+ $element.addClass(PRISTINE_CLASS);
+ toggleValidCss(true);
+
+ // convenience method for easy toggling of classes
+ function toggleValidCss(isValid, validationErrorKey) {
+ validationErrorKey = validationErrorKey ? '-' + snake_case(validationErrorKey, '-') : '';
+ $element.
+ removeClass((isValid ? INVALID_CLASS : VALID_CLASS) + validationErrorKey).
+ addClass((isValid ? VALID_CLASS : INVALID_CLASS) + validationErrorKey);
+ }
/**
* @ngdoc function
@@ -770,22 +788,30 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', '$e
*
* This method should be called by validators - i.e. the parser or formatter functions.
*
- * @param {string} validationErrorKey Name of the validator.
+ * @param {string} validationErrorKey Name of the validator. the `validationErrorKey` will assign
+ * to `$error[validationErrorKey]=isValid` so that it is available for data-binding.
+ * The `validationErrorKey` should be in camelCase and will get converted into dash-case
+ * for class name. Example: `myError` will result in `ng-valid-my-error` and `ng-invalid-my-error`
+ * class and can be bound to as `{{someForm.someControl.$error.myError}}` .
* @param {boolean} isValid Whether the current state is valid (true) or invalid (false).
*/
this.$setValidity = function(validationErrorKey, isValid) {
-
- if (!isValid && this.$error[validationErrorKey]) return;
- if (isValid && !this.$error[validationErrorKey]) return;
+ if ($error[validationErrorKey] === !isValid) return;
if (isValid) {
- delete this.$error[validationErrorKey];
- if (equals(this.$error, {})) {
+ if ($error[validationErrorKey]) invalidCount--;
+ $error[validationErrorKey] = false;
+ toggleValidCss(isValid);
+ if (!invalidCount) {
+ toggleValidCss(isValid, validationErrorKey);
this.$valid = true;
this.$invalid = false;
}
} else {
- this.$error[validationErrorKey] = true;
+ if (!$error[validationErrorKey]) invalidCount++;
+ $error[validationErrorKey] = true;
+ toggleValidCss(isValid)
+ toggleValidCss(isValid, validationErrorKey);
this.$invalid = true;
this.$valid = false;
}
@@ -818,6 +844,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', '$e
if (this.$pristine) {
this.$dirty = true;
this.$pristine = false;
+ $element.removeClass(PRISTINE_CLASS).addClass(DIRTY_CLASS);
parentForm.$setDirty();
}
@@ -910,14 +937,6 @@ var ngModelDirective = [function() {
formCtrl.$addControl(modelCtrl);
- forEach(['valid', 'invalid', 'pristine', 'dirty'], function(name) {
- scope.$watch(function() {
- return modelCtrl['$' + name];
- }, function(value) {
- element[value ? 'addClass' : 'removeClass']('ng-' + name);
- });
- });
-
element.bind('$destroy', function() {
formCtrl.$removeControl(modelCtrl);
});
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-01 21:50:16 +0000