Question

所以基本上我正在构建一个新的表单验证指令，我完全正常工作，除了我认为没有正确编码的一件事。因此，您知道使用指令进行表单验证是验证<input ngx-validation="alpha">如何将错误文本传递给我的指令中的另一个元素（我的输入正下方的Bootstrap <span class="text-danger">{{ validation_errors["input1"] }}</span>）？至于那一刻，我创建了一个范围变量，它存在于我的控制器中并且它确实有效......直到用户忘记创建该实际变量......那么我怎么想将1个元素的信息共享给另一个？顺便说一下，我的变量是一个包含所有输入错误消息的数组......这是我的代码：

<!-- html form -->
<input type="text" class="form-control" name="input1" ng-model="form1.input1" ngx-validation="alpha|min_len:3|required" />
<span class="validation text-danger">{{ validation_errors["input1"] }}</span>

JS代码

// my Controller 
myApp.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
  $scope.form1 = {};
  $scope.validation_errors = [];  // the scope variable
}]);

// creation of my directive
angular.module('ghiscoding.validation', ['pascalprecht.translate'])
  .directive('ngxValidation', function($translate){
    return{
      require: "ngModel",
      link: function(scope, elm, attrs, ctrl) {
        // get the ngx-validation attribute  
        var validationAttr = attrs.ngxValidation;

        // rest of the validation code...
        // ...

        if(!isFieldValid && ctrl.$dirty) {
            scope.validation_errors[ctrl.$name] = message;
        }else {
            scope.validation_errors[ctrl.$name] = "";
        }

        return value;
        };

        ctrl.$parsers.unshift(validator);
        ctrl.$formatters.unshift(validator);
      }
    };
  });

如果你查看我的代码，我使用的范围变量称为$scope.validation_errors = [];，它在Controller中创建，而不创建它，它当然会失败。你也可以看到我的github，我让它可用，也希望很多人可以使用我的Angular-Validation指令，因为它就像我做的那样简单:)看到我的Github Angular-Validation

的修改
为了说清楚，我的指令的验证部分工作正常。我真正的问题很简单，我如何从指令（指令连接到<input>）传递错误消息并将该错误消息（一个简单的字符串）传递给<span>他们是2不同的元素，我如何与指令中的另一个元素交谈，我该如何绑定？目前我正在使用一个全局变量，它需要存在于控制器中，这并不好......我是Angular的新手，我正在努力使用指令，所以请提供代码。非常感谢您的帮助。

的 ANSWER
因此，为了获得完整的Angular Directive，解决方案的最后一段代码已被回答here ...因为显示我的错误消息的<span>总是在我的输入后，我可以简单地更新下一个带有原生Angular jqLite的元素文本......就是这么简单......这是我的新HTML代码

<!-- HTML -->
<input type="text" name="input1" validation="alpha|min_len:3|required" />
<span class="validation text-danger"></span>

// Previous piece of code to replace
if(!isFieldValid && ctrl.$dirty) {
    scope.validation_errors[ctrl.$name] = message;
}

// REPLACED by this
if(!isFieldValid && ctrl.$dirty) {
    elm.next().text(message);
}

Answer 1

您应该执行与所有其他内置表单验证指令相同的操作：使用ngModelController的$ setValidity方法，使用您自己的密钥。然后，您的范围将能够使用

检查验证密钥是否存在错误

theFormName.theInputName.$error.yourValidationKey

该字段的有效性以及封闭形式的有效性将自动由角度处理。

请参阅http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController。

Angular - 表单验证自定义指令，如何将结果传递给另一个元素以进行错误显示？

1 个答案: