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.