Question

我尝试在角度视图中实现确认密码验证。写新

app.js中的

指令

enter image description here

并在确认密码文本框中添加compare-to

<div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-10">
            <input type="password"
                   class="form-control"
                   placeholder="Enter password"
                   ng-model="Password"
                   ng-minlength="5">

            <span class="validationMessage" ng-show="frm.password.$dirty && frm.password.$error.required">Required!</span>
            <span class="validationMessage" ng-show="frm.password.$dirty && frm.password.$error.minlength">Min length 5!</span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Confirm Password:</label>
        <div class="col-sm-10">
            <input type="password"
                   class="form-control"
                   ng-model="ConfirmPassword"
                   required
                   compare-to="Password"
                   placeholder="Enter Confirm password">

            <span class="validationMessage" ng-show="frm.ConfirmPassword.$error">Required!</span>
        </div>
    </div>

但确认密码未显示任何验证。并显示错误消息无法设置属性＆＃39; compareTo＆＃39;在chrome中未定义。

enter image description here

Answer 1

它主要是在工作。那里你只有很少的逻辑缺陷。

首先，使用<label for="x">期望模板具有id="x"的元素。没有什么重要的，但是当您检查form有效时，您应该参考您的表单字段，而不是基础模型。

因此，您应该输入frm.<ng-model-var>.$error而不是frm.<form-field-name>.$error。

您需要为输入添加名称，并再次检查表单验证逻辑。这应该适用于您的password。

<!-- added required, input name, changed validation logic -->
<input type="password" 
       name="password"
       class="form-control" 
       placeholder="Enter password" 
       ng-model="Password" 
       required 
       ng-minlength="5" />
<span class="validationMessage" 
      ng-show="frm.password.$error.required">
  Required!
</span>
<span class="validationMessage" 
      ng-show="frm.password.$dirty && frm.password.$error.minlength">
  Min length 5!
</span>

这适用于您的confirm password。

<!-- added input name, changed validation logic -->
<input type="password"
       name="confirmpassword"
       class="form-control" 
       placeholder="Enter Confirm password"
       ng-model="ConfirmPassword" 
       required 
       compare-to="Password" />
<span class="validationMessage" 
      ng-show="frm.password.$valid && frm.confirmpassword.$invalid">
  Passwords do not match!
</span>

Answer 2

尝试使用更新版本

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-route.min.js

并在controller.js添加此内容..

'ngRoute'
var loginApp = angular.module('indexApp', ['authModule','requestModule','ngRoute']);

确认密码自定义指令在Angular

2 个答案: