feat(tagsInput): Option not to validate an "untouched" control

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());

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"');