Impostazione validità di più ingressi da una direttiva AngularJS

Question

Sto provando a creare una direttiva che può essere utilizzata per reimpostare lo stato di convalida di più controlli di input in un gruppo, quando viene modificato uno dei valori del controllo. I gruppi sono identificati dall'attributo della direttiva impostata in HTML. Es: - Entrambi i Da Data e di sesso ingressi reimposta lo stato di validità se uno dei valori controlli ingresso è cambiata dall'utente

Questo è quello che ho finora

JS/angolare

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"> 

Può reimpostare la validità del proprio controllo di input, ma non può accedere agli altri controlli di input con direttiva e stesso valore di attributo. Qual è il miglior modo angolare possibile per accedere agli altri controlli interrogando gli input con lo stesso attributo?

Answer 1

Vorrei provare ad affrontare questo problema implementando l'oggetto helper per archiviare i controller di elementi di gruppo con metodi da aggiungere al gruppo e setValidity di tutti gli elementi nel gruppo.

Qualcosa di simile a questo:

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

è possibile memorizzare tutti i controlli che hanno lo stesso gruppo in un 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. 
      }); 
     } 
    }; 
}); 

Non dimenticare di prendersi cura di rimuovere i controllori volta che l'elemento è distrutto, ascoltando l'evento $destroy.