监控 AngularJS 指令中输入元素上的 $valid答案

【问题标题】：Monitor for $valid on input element in AngularJS directive监控 AngularJS 指令中输入元素上的 $valid
【发布时间】：2016-03-08 13:26:07
【问题描述】：

我有这个指令，它在每个带有add-icon-element 属性的<input> 元素之前添加一个<i> 元素。现在我要做的是观察每个<input> 元素的验证，因此当用户在其中一个元素中键入内容时，前面的<i> 元素的类将更改为fa-check green-i。我尝试通过使用attrs.$observe 来查看类何时从ng-invalid 更改为ng-valid，但它仅在DOM 结构化时触发一次，它不会对input 元素中的更改做出反应。

我做错了什么？有没有办法使用输入$valid 来做到这一点？我看到了一些关于input 的答案，并建议将名称添加到form 和input - 但是如果我需要验证多个inputs 而不仅仅是一个，我该怎么办？

angular.module('mean.theme')
.directive("addIconElement", function () {
    return {
        restrict: 'EA',
        link: function (scope, inputElement, attrs) {
            var $icon = $('<i class="fa"></i>');
            inputElement.before($icon);
            attrs.$observe('class', function(val){
                if (val.indexOf("ng-valid") >= 0) {
                    inputElement.prev().addClass('fa-check green-i');
                }
            });
        }
    };
});

这是我在 html 中的“输入”之一：

<form role="form" name="createProjectForm" class="form-validation">
    <div class="form-group">
        <label class="control-label text-center center-block" for="project.name">
                Name Your Project
        </label>
        <div class="input-icon right">
            <input type="text" placeholder="type here" name="project.name"
                ng-model="project.name" required="required" class="form-control" add-icon-element/>
        </div>
    </div>
<form>

【问题讨论】：

你的指令 html 长什么样？？
@PankajParkar 是的，对不起，我添加了 html..

标签： javascript jquery angularjs validation

【解决方案1】：

您不需要为这种情况创建指令，您可以通过使用ng-class 指令来实现，只需将您的字段名称从name="project.name" 更改为name="project_name"

<div class="input-icon right">
    <input type="text" placeholder="type here" name="project.name" 
       ng-class="{'fa-check green-i': createProjectForm.project_name.$valid}"
       ng-model="project.name" required="required" 
       class="form-control"/>
</div>

更新

要使其成为通用方式，您需要在该元素上使用 require ngModel 指令，这将使您能够访问 ngModelController。

angular.module('mean.theme')
.directive("addIconElement", function () {
    return {
        restrict: 'EA',
        require: 'ngModel', //require to get access to `ngModelController`
        link: function (scope, inputElement, attrs, ngModelCtrl) {
            var $icon = $('<i class="fa"></i>');
            inputElement.before($icon);
            scope.$watch(function(){
               return ngModelCtrl.$valid; //made watch on field validation.
            }, function(val){
                if (val.indexOf("ng-valid") >= 0) {
                    inputElement.prev().addClass('fa-check green-i');
                }
            });
        }
    };
});

【讨论】：

感谢您的回答，但我需要将类“fa-check green-i”应用于放置在该输入之前的 标签。而且，我有多个输入，所以我需要对所有输入更通用的东西，而不是专门针对每一个输入。任何想法..？
完美答案，非常感谢！我对 Angular 很陌生，并且正在寻找 2 小时的解决方案...... :)

【解决方案2】：

我认为这会为您做到： https://stackoverflow.com/a/23871934/1636157

angular.module('mean.theme')
.directive("addIconElement", function () {
    return {
        restrict: 'EA',
        require: '^form',
        link: function (scope, inputElement, attrs, ctrl) {
            var $icon = $('<i class="fa"></i>');
            inputElement.before($icon);

            scope.$watch(ctrl.$name + '.' + inputElement.attr('name') + '.$valid', function (valid) {
               if(valid) {
                  inputElement.prev().addClass('fa-check green-i');
               } else {
                  inputElement.prev().removeClass('fa-check green-i');
               }
            }); 
        }
    };
});

【讨论】：