设置来自AngularJS指令的多个输入的有效性 [英] Set validity of multiple inputs from a AngularJS Directive

问题描述

我正在尝试创建一个指令，当一个控件的值更改时，该指令可用于重置组中多个输入控件的验证状态.组由HTML中设置的指令的属性标识. 例如:-当用户更改控件输入值之一时，从日期和到日期这两个输入都会重置有效性状态

I'm trying to create a directive which can be used to reset validation status of multiple input controls in a group, when one of the control's value is changed. Groups are identified by the attribute of the directive set in HTML. Ex: - Both of the From Date and To Date inputs resets the validity state when one of the controls input value is changed by the user

这是我到目前为止所拥有的

This is what I have so far

JS/Angular

angular.module('myModule').directive('groupedInputs', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ctrl) {
            element.on('change', function () {

                // Resetting own validity
                scope.$apply(ctrl.$setValidity('server', true));

                // Here I need to set the validity of the controls which
                // have the `GroupedInputs` directive with the 
                // same  attribute value
            });
        }
    };
});

HTML

<input name="FromDate" type="date" class="form-control" ng-model="model.FromDate" grouped-inputs="FromToDates">
<input name="ToDate" type="date" class="form-control" ng-model="model.ToDate" grouped-inputs="FromToDates">

它可以重置自己输入控件的有效性，但不能访问具有伪指令和相同属性值的其他输入控件.通过查询具有相同属性的输入来访问其他控件的最佳角度方法是什么?

It can reset the validity of the own input control, but can not access the other input controls with directive and same attribute value. What is the best possible angular way to access the other controls by querying the inputs with the same attribute?

推荐答案

我将尝试通过实现辅助对象来存储组元素控制器，并使用添加到组中的方法以及组中所有元素的setValidity来解决此问题.

I would try to approach this problem by implementing helper object to store group elements controllers with methods to add to the group and setValidity of all elements in the group.

类似这样的东西:

angular.module('myModule').directive('groupedInputs', function() {

    var groupControls = {
        groups: {},
        add: function(name, ctrl) {
            this.groups[name] = this.groups[name] || [];
            this.groups[name].push(ctrl);
        },
        setValidity: function(name, key, value) {
            this.groups[name].forEach(function(ctrl) {
                ctrl.$setValidity(key, value);
            });
        }
    };

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, ctrl) {

            // Add element controller to the group
            groupControls.add(attrs.groupedInputs, ctrl);

            element.on('change', function() {

                // When needed, set validity of elements in the group
                groupControls.setValidity(attrs.groupedInputs, 'server', false);
                scope.$apply();

            });
        }
    };
});

演示: http://plnkr.co/edit/fusaaN6k9J5SZ7iQA97V ?p =预览

这篇关于设置来自AngularJS指令的多个输入的有效性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！