0

以下は私のコードで、パスワードに対しては正常に機能していますが、どういうわけかパスワードの再入力の検証が機能していません。ここで私が間違っていることを教えてください。

  <div class="form-group has-feedback">
    <input type="password" class="form-control" placeholder="Password" ng-model="vm.user.password" name="password" required="" ng-minlength="6" ng-maxlength="20" />
    <div class="help-block" ng-messages="userForm.password.$error" ng-if="userForm.password.$touched">
      <p ng-message="minlength, maxlength, required">Please enter a password containing 6 to 20 characters.</p>
    </div>        
  </div>
  <div class="form-group has-feedback">
    <input type="password" class="form-control" placeholder="Retype password" name="retypePassword" required="" ng-model="vm.user.retypePassword">
    <div class="help-block" ng-messages="userForm.retypePassword.$error" ng-if="userForm.retypePassword.$touched">
      <p ng-message when="vm.user.retypePassword !== vm.user.password" >Please retype your correct password.</p>
    </div>

DOCSでは、式を使用できると述べていましたが、どういうわけか検証されていません。

4

3 に答える 3

0

この場合、ng-required、ng-minlength、ng-pattern などの独自のチェックを作成するのに役立つディレクティブuse-form-errorを使用できます。

<form name="ExampleForm">
  <label>Password</label>
  <input ng-model="password" required />
  <br>
  <label>Confirm password</label>
  <input ng-model="confirmPassword" required use-form-error="dontMatch" use-error-expression="password && confirmPassword && password!=confirmPassword" />
  <div ng-messages="ExampleForm.$error" class="errors">
    <div ng-message="dontMatch">
      Passwords Do Not Match!
    </div>
  </div>
</form>

ライブサンプルjsfiddle。

于 2016-02-02T04:36:52.060 に答える
0

使い方を間違っていると思います。このwhen属性はマルチメッセージの状況で使用され、基本的に ng-message 属性と同様に、文字列キーまたはキーの配列を使用して、定義されたエラーが存在するかどうかを確認します。

ここで説明されているように、ディレクティブを使用してカスタム バリデータを作成できます。

次のような ng-change 関数を使用して $error オブジェクトを簡単に操作することもできます。

<input type="password" ng-model="vm.user.retypePassword"
    ng-change="setMatchError(userForm.retypePassword,userForm.password)">

次に、コントローラーで

vm.setMatchError = function(input1, input2) {
    if (input1.$viewValue!=input2.$viewValue) {
         input1.$error.match = true;
    } else {
         delete input1.$error['match'];
    }
 }

最後に、ng-message ディレクティブを使用して参照できるようになります

<p ng-message="match">Your passwords must match!</p>

また

<p ng-message when="match">Your passwords must match!</p>

この最後の方法は、角度オブジェクトをアプリケーションコードで直接操作するフォームにはおそらく眉をひそめます。

ただし、入力が html5 の検証に合格していない場合、モデルが更新されないため、モデルの値を参照できないようです。

最後のオプション: 確認パスワードの ng-message(s) ディレクティブを完全に無視して (実際にはあまり得られないため)、ng-if および ng-change と直接モデル検証を使用することができます。

于 2016-01-31T07:20:04.637 に答える
0

ここのドキュメントで説明されているように、 式を使用する必要がある場合は when 属性にエラー名を指定する必要があります。メッセージ ブロックに式を配置する必要があるため、div ブロックを次のように変更します。

<div class="help-block" ng-messages="multipleValueExpression">
      <p ng-message when="value1" >Please retype your correct password.</p>
</div>

または、このようなwhen-expでwhenを変更することで同じことを達成できます

<p ng-message when-exp="vm.user.retypePassword !== vm.user.password" >Please retype your correct password.</p>

幸運を

于 2016-02-02T05:08:14.697 に答える