javascript - 确认密码自定义指令在 Angular 中不起作用

Question

我尝试在 Angular View 中实现确认密码验证。写新的

app.js 中的指令

并在确认密码文本框中添加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>

但是确认密码没有显示任何验证。并显示错误消息 Cannot set property 'compareTo' of undefined in chrome.

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>