AngularJS中动态命名输入字段的验证答案

【问题标题】：Validation of dynamically named input fields in AngularJSAngularJS中动态命名输入字段的验证
【发布时间】：2021-01-15 06:51:48
【问题描述】：

我在ng-repeat 中有一个输入字段，它获取一个动态名称标签，如下所示：

<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>

show-errors 验证器如下所示：

.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);
        }
    }
});

我正在尝试使用name tag 单独触发每个输入的验证器。到目前为止，{{index}} 部分不会被渲染，因此验证器不起作用。

According to Github，能够做到这一点是在 1.3 之后修复的，我正在运行 1.5，但到目前为止还没有运气！

有什么建议吗？

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-validation

【解决方案1】：

这应该对你有用，我认为这是你如何建立名称的问题。

而不是<input name="new_taxid_abroad_{{$index}}"

你应该尝试构建像name="{{'new_taxid_abroad_' + $index}}"这样的字符串

如果您使用方括号 {{ }}，请将所有工作放在其中。

【讨论】：