angularjs - 同じバリデータに対して複数のフィールドの検証状態を共有する

Question

まず、Google と SO を検索しましたが、この特定の状況に対する回答が見つかりませんでした。はい、同じように聞こえますが、「MoreThan / LessThan」の考え方に基づいた投稿が他にもあります。これはその考え方にまったく従わないので、これを重複参照としてマークしないでください.

プランカーの例をチェックしてください

ユーザーがページの他の場所に既に存在するアドレスを入力しないようにしています。これを行うには、すべての住所フィールドを検証する必要があります。異なる場所に同じ番地がある可能性があるためです。アドレスが重複しないように修正されたら、バリデーターがすべての関連フィールドを有効に設定する必要があります。現在、最後に変更されたフィールドのみを有効に設定し、残りは無効のままにします。

プランカーの例は、何が起こっているかを示しています。私は、すべてのフィールドを繰り返し処理し、prestine と untouched に設定してから、dirty と touched に設定して検証を再度トリガーするなど、さまざまなアプローチを試しましたが、うまくいきません。

バリデーター

   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>