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?

Display Name is missing · Accepted Answer · 2020-09-29 23:05:33Z

0

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.

answered Sep 29, 2020 at 23:05

Display Name is missing

6,2573 gold badges38 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Validation of dynamically named input fields in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related