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

Posted 2023-05-09

【中文标题】监控 AngularJS 指令中输入元素上的 $valid

【英文标题】：Monitor for $valid on input element in AngularJS directive

【发布时间】：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..

【参考方案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://***.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');
               
            ); 
        
    ;
);