Validation of dynamically named input fields in AngularJS

Question

I have an input field inside an ng-repeat, which gets a dynamic name tag, like so:

<div ng-repeat="a in b track by $index">
  <div show-errors >
    <label for="new_taxid_abroad_{{$index}}"> Bla </label>

    <input name="new_taxid_abroad_{{$index}}" ng-model="xxx" type="text">
  </div>
</div>

The show-errors validator looks like this:

.directive('showErrors', function($timeout) {

    var validate = function($element, valid) {
        $element.toggleClass('has-error', !valid);
        $element.toggleClass('has-success', valid);
    };

    return {
        restrict: 'A',
        require: '^form',
        controller: function($scope, $element, $attrs) {
            this.$validate = function(name) {
                validate($element, name);
            };
        },
        link: function($scope, $element, $attrs, formCtrl) {
            // find the text box element, which has the 'name' attribute
            var inputEl = $element[0].querySelector("[name]");
            // convert the native text box element to an angular element
            var inputNgEl = angular.element(inputEl);
            // get the name on the text box so we know the property to check
            // on the form controller
            var inputName = inputNgEl.attr('name');

            var validateEvent = function(evt, name) {
                if (name && name != inputName)
                    return;

                $timeout(function() {
                    validate($element, formCtrl[inputName] ? formCtrl[inputName].$valid : false);
                }, 0);
            };

            // only apply the has-error class after the user leaves the text box
            inputNgEl.bind('blur', validateEvent);
            $scope.$on('show-errors-check-validity', validateEvent);
        }
    }
});

I'm trying to trigger the validator for each input individually, using the name tag. So far, the {{index}} part will not be rendered and therefore the validator doesn't work.

According to Github, to be able to do this was fixed after 1.3, and I'm running 1.5, but so far no luck!

Any tips?

Answer 1

This should work for you, I believe it's an issue with how you are building the name.

Instead of <input name="new_taxid_abroad_{{$index}}"

You should try to build the string like name="{{'new_taxid_abroad_' + $index}}"

If you're using brackets {{ }}, put all of your work inside of them.