角：任意のフィールドの入力

Question

上で実行する力カスタムフォームバリデータIは、次のシナリオを検証するために、パスワードフィールド用のカスタムバリデータを書いた：

• ユーザーがID定義されている場合は、パスワードがあります常に有効な（変化のないことを意味し、空でもよい）
• ユーザーはIDが定義されていない場合、パスワードは空にすることはできません（新しいユーザーがパスワードを持っている必要があります）

問題は私がバリに気づいた、ありますユーザーがフィールドとやりとりするときにのみ実行されます（required）があります。これにより、新しいユーザーのパスワードが空の場合でもフォームが有効に見えるようになります。パスワード入力とやりとりすると、すべてがうまく見えます。

文書化されていないngRequiredディレクティブを使用してビジネスロジックの要件を解決しましたが、カスタムバリデータに関する問題を理解したいと思います。

Answer 1

これをあきらめたら、もう一度問題が発生しましたが、回避策が見つかりませんでした。 Fortunatel、私は解決策を見つけました：

カスタムバリデータを作成するときは、フォームフィールドではなくモデルフィールドにバインドする必要があります。これにより、常に正しく検証されます（フォームフィールドにある$ modelValueと$ viewValueのプロパティの違いに起因していると考えられます）。参考のために以下のコードを参照してください。

<input type="password" class="form-control" id="confirmpass" name="confirmpass" placeholder="Repeat Password" 
         ng-model="controller.selectedUser.passwordRepeat" 
         compare-to="controller.selectedUser.password"/> 

とカスタムバリデータ：カスタムバリデータがなかった理由を全体的に問題に良い解決策のように思えるが、私は本当に好奇心旺盛になり

angular.module("compareTo", []).directive("compareTo", function() { 
    return { 
     require: "ngModel", 
     scope: { 
     otherModelValue: "=compareTo" 
    }, 
    link: function(scope, element, attributes, ngModel) { 

     ngModel.$validators.compareTo = function(modelValue) { 
      return modelValue == scope.otherModelValue; 
     }; 

     scope.$watch("otherModelValue", function() { 
      ngModel.$validate(); 
     }); 
    } 
    }; 
); 

Answer 2

あなたはここにあなたのビジネスにui-validateを試すことができます。

$scope.passwordValidation = { 
       length: '$value.length >= 5 || $value.length == 0' 
      }; 
$scope.password2Validation = { 
       same_passwords: 'userPassword.value==$value' 
      }; 

そしてあなたのHTML：

<input id="password" class="form-control" type="password" ng-model="userPassword.value" 
        name="password" ui-validate="passwordValidation"/> 
<input id="password2" class="form-control" type="password" ng-model="userPassword.confirm" 
        name="password2" ui-validate="password2Validation" ui-validate-watch="'userPassword.value'"/> 

他のパスワードフィールドを気にするUI-検証を伝えるためにui-validate-watchに注意してください。