From 3ac6ca13a63096132095df1f1ddaf74214ffd269 Mon Sep 17 00:00:00 2001 From: Alvaro Livraghi Date: Thu, 23 Mar 2017 18:28:31 +0100 Subject: [PATCH 1/5] feat(tagsInput): Option not to validate an "untouched" control Add an option for the user to set avoid validation on untouched control. Closes #784. --- src/tags-input.js | 9 ++++++++- test/tags-input.spec.js | 22 ++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/tags-input.js b/src/tags-input.js index 4afc66d1..56b5cbf9 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -17,6 +17,7 @@ * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values. * @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text. * @param {number=} tabindex Tab order of the control. + * @param {boolean} [validateUntouched=true] Flag indicating that the validation is required on startup. * @param {string=} [placeholder=Add a tag] Placeholder text for the control. * @param {number=} [minLength=3] Minimum length for a new tag. * @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag. @@ -173,6 +174,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags onTagRemoving: '&', onTagRemoved: '&', onTagClicked: '&', + validateUntouched: '@' }, replace: false, transclude: true, @@ -203,7 +205,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags keyProperty: [String, ''], allowLeftoverText: [Boolean, false], addFromAutocompleteOnly: [Boolean, false], - spellcheck: [Boolean, true] + spellcheck: [Boolean, true], + validateUntouched: [Boolean, true] }); $scope.tagList = new TagList($scope.options, $scope.events, @@ -261,6 +264,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags focusInput; setElementValidity = function() { + // Prevents $error setting on startup + if (!scope.options.validateUntouched && ngModelCtrl.$untouched) { + return; + } ngModelCtrl.$setValidity('maxTags', tagList.items.length <= options.maxTags); ngModelCtrl.$setValidity('minTags', tagList.items.length >= options.minTags); ngModelCtrl.$setValidity('leftoverText', scope.hasFocus || options.allowLeftoverText ? true : !scope.newTag.text()); diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js index 3a72d514..74a45b7b 100644 --- a/test/tags-input.spec.js +++ b/test/tags-input.spec.js @@ -1146,6 +1146,17 @@ describe('tags-input directive', function() { expect($scope.form.tags.$error.minTags).toBe(true); }); + it('does not make the untouched element invalid when the number of tags is less than the min-tags option', function() { + // Arrange + compileWithForm('min-tags="3"', 'name="tags"', 'validate-untouched="false"'); + + // Act + $scope.$digest(); + + // Assert + expect($scope.form.tags.$valid).toBe(true); + }); + it('makes the element valid when the number of tags is not less than the min-tags option', function() { // Arrange compileWithForm('min-tags="2"', 'name="tags"'); @@ -1213,6 +1224,17 @@ describe('tags-input directive', function() { expect($scope.form.tags.$error.maxTags).toBe(true); }); + it('does not make the untouched element invalid when the number of tags is greater than the max-tags option', function() { + // Arrange + compileWithForm('max-tags="2"', 'name="tags"', 'validate-untouched="false"'); + + // Act + $scope.$digest(); + + // Assert + expect($scope.form.tags.$valid).toBe(true); + }); + it('makes the element valid when the number of tags is not greater than the max-tags option', function() { // Arrange compileWithForm('max-tags="2"', 'name="tags"'); From 876bfe62ca7a41eb3b9f1ed88ea62ab6f1a588a7 Mon Sep 17 00:00:00 2001 From: Alvaro Livraghi Date: Thu, 23 Mar 2017 18:28:31 +0100 Subject: [PATCH 2/5] feat(tagsInput): Option not to validate an "untouched" control Add an option for the user to set avoid validation on untouched control. Closes #784. --- src/tags-input.js | 9 ++++++++- test/tags-input.spec.js | 22 ++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/tags-input.js b/src/tags-input.js index 4afc66d1..56b5cbf9 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -17,6 +17,7 @@ * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values. * @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text. * @param {number=} tabindex Tab order of the control. + * @param {boolean} [validateUntouched=true] Flag indicating that the validation is required on startup. * @param {string=} [placeholder=Add a tag] Placeholder text for the control. * @param {number=} [minLength=3] Minimum length for a new tag. * @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag. @@ -173,6 +174,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags onTagRemoving: '&', onTagRemoved: '&', onTagClicked: '&', + validateUntouched: '@' }, replace: false, transclude: true, @@ -203,7 +205,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags keyProperty: [String, ''], allowLeftoverText: [Boolean, false], addFromAutocompleteOnly: [Boolean, false], - spellcheck: [Boolean, true] + spellcheck: [Boolean, true], + validateUntouched: [Boolean, true] }); $scope.tagList = new TagList($scope.options, $scope.events, @@ -261,6 +264,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags focusInput; setElementValidity = function() { + // Prevents $error setting on startup + if (!scope.options.validateUntouched && ngModelCtrl.$untouched) { + return; + } ngModelCtrl.$setValidity('maxTags', tagList.items.length <= options.maxTags); ngModelCtrl.$setValidity('minTags', tagList.items.length >= options.minTags); ngModelCtrl.$setValidity('leftoverText', scope.hasFocus || options.allowLeftoverText ? true : !scope.newTag.text()); diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js index 3a72d514..74a45b7b 100644 --- a/test/tags-input.spec.js +++ b/test/tags-input.spec.js @@ -1146,6 +1146,17 @@ describe('tags-input directive', function() { expect($scope.form.tags.$error.minTags).toBe(true); }); + it('does not make the untouched element invalid when the number of tags is less than the min-tags option', function() { + // Arrange + compileWithForm('min-tags="3"', 'name="tags"', 'validate-untouched="false"'); + + // Act + $scope.$digest(); + + // Assert + expect($scope.form.tags.$valid).toBe(true); + }); + it('makes the element valid when the number of tags is not less than the min-tags option', function() { // Arrange compileWithForm('min-tags="2"', 'name="tags"'); @@ -1213,6 +1224,17 @@ describe('tags-input directive', function() { expect($scope.form.tags.$error.maxTags).toBe(true); }); + it('does not make the untouched element invalid when the number of tags is greater than the max-tags option', function() { + // Arrange + compileWithForm('max-tags="2"', 'name="tags"', 'validate-untouched="false"'); + + // Act + $scope.$digest(); + + // Assert + expect($scope.form.tags.$valid).toBe(true); + }); + it('makes the element valid when the number of tags is not greater than the max-tags option', function() { // Arrange compileWithForm('max-tags="2"', 'name="tags"'); From 46c813b305730cde1b2c5ed844f62a3ec88090d5 Mon Sep 17 00:00:00 2001 From: Alvaro Livraghi Date: Thu, 23 Mar 2017 18:28:31 +0100 Subject: [PATCH 3/5] feat(tagsInput): Option not to validate an "untouched" control Add an option for the user to set avoid validation on untouched control. Closes #784. --- src/tags-input.js | 9 ++++++++- test/tags-input.spec.js | 22 ++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/tags-input.js b/src/tags-input.js index de8e2466..93d109de 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -18,6 +18,7 @@ * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values. * @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text. * @param {number=} tabindex Tab order of the control. + * @param {boolean} [validateUntouched=true] Flag indicating that the validation is required on startup. * @param {string=} [placeholder=Add a tag] Placeholder text for the control. * @param {number=} [minLength=3] Minimum length for a new tag. * @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag. @@ -178,6 +179,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags onTagRemoving: '&', onTagRemoved: '&', onTagClicked: '&', + validateUntouched: '@' }, replace: false, transclude: true, @@ -209,7 +211,8 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags allowLeftoverText: [Boolean, false], addFromAutocompleteOnly: [Boolean, false], spellcheck: [Boolean, true], - useStrings: [Boolean, false] + useStrings: [Boolean, false], + validateUntouched: [Boolean, true] }); $scope.tagList = new TagList($scope.options, $scope.events, @@ -267,6 +270,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags focusInput; setElementValidity = function() { + // Prevents $error setting on startup + if (!scope.options.validateUntouched && ngModelCtrl.$untouched) { + return; + } ngModelCtrl.$setValidity('maxTags', tagList.items.length <= options.maxTags); ngModelCtrl.$setValidity('minTags', tagList.items.length >= options.minTags); ngModelCtrl.$setValidity('leftoverText', scope.hasFocus || options.allowLeftoverText ? true : !scope.newTag.text()); diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js index 129011fb..bbc7390d 100644 --- a/test/tags-input.spec.js +++ b/test/tags-input.spec.js @@ -1146,6 +1146,17 @@ describe('tags-input directive', function() { expect($scope.form.tags.$error.minTags).toBe(true); }); + it('does not make the untouched element invalid when the number of tags is less than the min-tags option', function() { + // Arrange + compileWithForm('min-tags="3"', 'name="tags"', 'validate-untouched="false"'); + + // Act + $scope.$digest(); + + // Assert + expect($scope.form.tags.$valid).toBe(true); + }); + it('makes the element valid when the number of tags is not less than the min-tags option', function() { // Arrange compileWithForm('min-tags="2"', 'name="tags"'); @@ -1213,6 +1224,17 @@ describe('tags-input directive', function() { expect($scope.form.tags.$error.maxTags).toBe(true); }); + it('does not make the untouched element invalid when the number of tags is greater than the max-tags option', function() { + // Arrange + compileWithForm('max-tags="2"', 'name="tags"', 'validate-untouched="false"'); + + // Act + $scope.$digest(); + + // Assert + expect($scope.form.tags.$valid).toBe(true); + }); + it('makes the element valid when the number of tags is not greater than the max-tags option', function() { // Arrange compileWithForm('max-tags="2"', 'name="tags"'); From 33ae4898766fed8671cb95a7ecb67e13a148db5b Mon Sep 17 00:00:00 2001 From: Alvaro Livraghi Date: Wed, 19 Apr 2017 15:40:16 +0200 Subject: [PATCH 4/5] changed position in docs to avoid merge issues --- src/tags-input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tags-input.js b/src/tags-input.js index 93d109de..132d280b 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -17,8 +17,8 @@ * @param {string=} [keyProperty=text] Property to be used as a unique identifier for the tag. * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values. * @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text. - * @param {number=} tabindex Tab order of the control. * @param {boolean} [validateUntouched=true] Flag indicating that the validation is required on startup. + * @param {number=} tabindex Tab order of the control. * @param {string=} [placeholder=Add a tag] Placeholder text for the control. * @param {number=} [minLength=3] Minimum length for a new tag. * @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag. From a0320112c2651d1f2f3f10cb7ccb839a8b11aff3 Mon Sep 17 00:00:00 2001 From: Alvaro Livraghi Date: Wed, 19 Apr 2017 15:52:23 +0200 Subject: [PATCH 5/5] removed duplicated line in docs --- src/tags-input.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/tags-input.js b/src/tags-input.js index 2f16a2b6..132d280b 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -19,7 +19,6 @@ * @param {string=} [text=NA] Assignable Angular expression for data-binding to the element's text. * @param {boolean} [validateUntouched=true] Flag indicating that the validation is required on startup. * @param {number=} tabindex Tab order of the control. - * @param {boolean} [validateUntouched=true] Flag indicating that the validation is required on startup. * @param {string=} [placeholder=Add a tag] Placeholder text for the control. * @param {number=} [minLength=3] Minimum length for a new tag. * @param {number=} [maxLength=MAX_SAFE_INTEGER] Maximum length allowed for a new tag.