針對同一個驗證器分享多個字段的驗證狀態

Question

我將開始說明我搜索了谷歌和SO，並且我還沒有找到針對此特定情況的答案。是的，還有其他的帖子聽起來相同，但更多的是基於「More Than/LessThan」的思路。這並沒有遵循這種心態，所以請不要將其標記爲重複提及它們。

退房的Plunker Example

我試圖以確保用戶不輸入已經存在的其他在網頁上的地址。爲此，我需要驗證所有地址字段，因爲不同的地點可能具有相同的街道地址。我需要驗證器將所有相關字段設置爲有效，如果任何一個地址被修復爲不重複，則任何地址都無效。目前它只會將最後一個字段設置爲有效，並將其餘字段設置爲無效。

Plunker example演示發生了什麼事。我嘗試了很多不同的方法，比如遍歷所有字段，並將它們設置爲prestine和untouch，然後將它們設置爲dirty並觸摸以再次觸發驗證，但是我沒有運行這個工作。

驗證

angular.directive('ruleFunc', ['$parse', function($parse) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function($scope, $element, $attrs, $ngModel) { 
     var validatorName = $attrs.ruleName; 
     var validatorFunc = $attrs.ruleFunc; 

     if (!angular.isDefined(validatorName)) { 
      throw Error("rule-name attribute must be defined."); 
     } 

     if (!angular.isDefined(validatorFunc)) { 
      throw Error("rule-func attribute must be defined."); 
     } 

     // in real code I passing a function call with the model as the param 
     // this example demonstrated the issue I am having though 
     var expressionHandler = $parse(validatorFunc); 

     // had to use viewChangeListener because changes to the model 
     // were not showing up correctly in the actual implementation 
     $ngModel.$viewChangeListeners.push(function() { 
      var valid = expressionHandler($scope); 
      $ngModel.$setValidity(validatorName, valid); 
     }); 
     }); 

表

<form name="AddressForm" novalidate> 
<h1>Address Form</h1> 
<div style="margin:20px"> 
    <input id="Street" type="text" name="Street" placeholder="Street" data-ng-model="ctrl.address.street" rule-func="ctrl.checkVal()" rule-name="profileHasContact"> {{!AddressForm.Street.$error.profileHasContact}} 
    <br /> 

    <input id="City" type="text" name="City" placeholder="City" data-ng-model="ctrl.address.city" rule-func="ctrl.checkVal()" rule-name="profileHasContact"> {{!AddressForm.City.$error.profileHasContact}} 
    <br /> 

    <input id="State" type="text" name="State" placeholder="State" data-ng-model="ctrl.address.state" rule-func="ctrl.checkVal()" rule-name="profileHasContact"> {{!AddressForm.State.$error.profileHasContact}} 
    <br /> 

    <input id="Zip" type="text" name="Zip" placeholder="Zip" data-ng-model="ctrl.address.zip" rule-func="ctrl.checkVal()" rule-name="profileHasContact"> {{!AddressForm.Zip.$error.profileHasContact}} 
    <br /> 

    <div ng-if="(AddressForm.Street.$error.profileHasContact 
     || AddressForm.City.$error.profileHasContact 
     || AddressForm.State.$error.profileHasContact 
     || AddressForm.Zip.$error.profileHasContact)">Address already exists in Main Contacts</div> 

    <button type="submit">Submit</button> 
</div> 

Answer 1

我沒有找到一個職位，這是足夠接近，我可以砍在一起的解決方案。 Form validation - Required one of many in a group

這裏是更新plunker

更新驗證

directive('ruleFunc', ['$parse', function($parse) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function($scope, $element, $attrs, $ngModel) { 
     var validatorName = $attrs.ruleName; 
     var validatorFunc = $attrs.ruleFunc; 
     var groupName = $attrs.ruleGroup; 

     if (!angular.isDefined(validatorName)) { 
      throw Error("rule-name attribute must be defined."); 
     } 

     if (!angular.isDefined(validatorFunc)) { 
      throw Error("rule-func attribute must be defined."); 
     } 

     if(angular.isDefined(groupName)){ 

      // setup place to store groups if needed 
      if (!$scope.__ruleValidationGroups) { 
       $scope.__ruleValidationGroups = {}; 
      } 
      var groups = $scope.__ruleValidationGroups; 

      // setip group if needed 
      if(!groups[groupName]){ 
      groups[groupName] = {}; 
      } 
      var group = groups[groupName]; 

      // assign model to group 
      group[$attrs.ngModel] = { 
      model: $ngModel 
      } 
     } 

     function updateValidity(valid){ 
      if(angular.isDefined(groupName)){ 

      // set all models in group to same validity 
      for(var prop in group){ 
       if(group.hasOwnProperty(prop)){ 
       group[prop].model.$setValidity(validatorName, valid); 
       } 
      } 

      } 
      else 
      { 
      // set this model validity if not in group 
      $ngModel.$setValidity(validatorName, valid); 
      } 
     } 

     var expressionHandler = $parse(validatorFunc); 
     $ngModel.$viewChangeListeners.push(function() { 
      var valid = expressionHandler($scope); 
      updateValidity(valid); 
     }); 
     } 
    }; 
    }]);