Set the validity of multiple inputs from AngularJS directive

Question

I am trying to create a directive that can be used to reset the check status of several input controls in a group when one of the control values ​​changes. Groups are identified by the attribute of a directive set in HTML. Example: - Both inputs From date and Date reset the validity state when the user input value is changed by the user

This is what I still have

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 its own input control, but cannot access other input elements with a directive and the same attribute value. What is the best way for angular to access other controls by querying inputs with the same attribute?

Answer 1

I would try to approach this problem by implementing a helper object for storing group element controllers using methods to add to the group and setValidity all the elements in the group.

Something like that:

 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(); }); } }; }); 

Demo: http://plnkr.co/edit/fusaaN6k9J5SZ7iQA97V?p=preview

Answer 2

You can save all controllers that have the same group in an array:

 angular.module('myModule').directive('groupedInputs', function () { var controllersPerGroup = {}; return { restrict: 'A', require: '?ngModel', link: function (scope, element, attrs, ctrl) { var groupName = attrs.groupedInputs; var group = controllersPerGroup[groupName]; if (!group) { group = []; controllersPerGroup[groupName] = group; } group.push(ctrl); element.on('change', function () { // Resetting own validity scope.$apply(ctrl.$setValidity('server', true)); // all the other controllers of the same group are in the groups array. }); } }; }); 

Do not forget to monitor the removal of controllers after the destruction of an element by listening to the $destroy event.