diff --git a/src/tags-input.js b/src/tags-input.js index de8e2466..132d280b 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -17,6 +17,7 @@ * @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 {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. @@ -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"');