How to validate dynamic rules with dynamic form elements created with ng-repeat and using ng-form?

Question

I have a dropdown that dynamically generates any number of text inputs, all of which have different validation rules (min/max length, pattern etc.). According to several other stackoverflow questions ie. (How to validate inputs dynamically created using ng-repeat, ng-show (angular)) using the ng-form module can allow you to create dynamic form elements with dynamic validation.

I've done this, but the problem is the validation rules do not update accordingly when the number of text fields are changed based off the selection in the dropdown. For example, the first dropdown option will generate 1 text input with a minlength of 3. And the second option may also generate 1 text input, but it's minlength will be 1. Even though the minlength rule is 1, angular ends up validating a minlength of 3, from the original selection's text field.

My question is, is this possible in angular without creating some kind of custom directive? An alternative solution would be to just output all of the possible text elements for each dropdown selection up front, and use ng-show based off of the dropdown selection to show/hide each set. But I'd like to keep the template clean and use ng-repeat to dynamically generate them like I already am.

I've set up a minimal example:

var validationApp = angular.module('validationApp', []);

validationApp.controller('ValidationCtrl', ['$scope', function($scope) {
    $scope.textChoices = [
        { label: "1 line", validation: [ { minLength: 3 } ] },
        { label: "2 lines", validation: [ { minLength: 1 }, { minLength: 3 } ] },
        { label: "3 lines", validation: [ { minLength: 2 }, { minLength: 2 }, { minLength: 3 } ] }
    ];
    $scope.choice = $scope.textChoices[0];
    $scope.text = [];
}]);

Please view the html and full example here: http://jsfiddle.net/anpsince83/kBVR2/

Answer 1

Unfortunately it just doesn't look like it's possible using the built-in validation directives, so as others have suggested, I implemented a custom directive.

validationApp.directive('myMinlength', [function() {
    return {
        require: 'ngModel',
        scope: {
            myMinlength: '@',
            ngModel: '='
        },
        link: function(scope, elem, attrs, ctrl) {
            var minLengthValidator = function(value) {
                if (attrs.myMinlength) {
                    var minlength = attrs.myMinlength;
                    if (!ctrl.$isEmpty(value) && value.length < minlength) {
                        ctrl.$setValidity('myMinlength', false);
                    } else {
                        ctrl.$setValidity('myMinlength', true);
                    }
                } else {
                    ctrl.$setValidity('myMinlength', true);
                }
            };

            // validate when minlength attr changes
            scope.$watch('myMinlength', function() {
                minLengthValidator(scope.ngModel);
            });

            // validate when model changes
            scope.$watch('ngModel', minLengthValidator);
        }
    }
}]);

Answer 2

As mentioned in the other Stack Overflow question it's not possible with the current AngularJS form validation. However here is a method using ngChange:

AngularJS:

validationApp.controller('ValidationCtrl', ['$scope', function($scope) {
$scope.chkLength = function(i) {
    $scope.minBad[i] = ($scope.text[i].length < $scope.choice.validation[i].minLength);
};
$scope.minBad = {};
}]);

HTML:

        <ng-form name="textForm">
            <label>Enter Text</label>
            <input type="text"
                   name="text"
                   ng-model="text[$index]"
                   ng-change="chkLength($index)">

            Min {{ rules.minLength }} Chars

            <div class="error" ng-show="minBad[$index]">
                <small>Please enter min amount of characters.</small>
            </div>
        </ng-form>

Fiddle code: http://jsfiddle.net/kBVR2/61/