设置来自 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

这是我目前所拥有的

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