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

拉吉什S

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

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>

但是确认密码没有显示任何验证。并显示错误消息:无法在chrome中设置未定义的属性“ compareTo”

在此处输入图片说明

米科·维塔拉(Mikko Viitala)

大部分都在工作。您在那里只有很少的逻辑缺陷。

首先,使用<label for="x">Expects模板具有一个id="x"present元素那里没什么大不了的,但是当您检查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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

自定义指令不起作用

Angular自定义指令中的动态模板(在嵌套ng-repeats中)不起作用

自定义指令中的 Angular HostBinding 在 *ngFor 中不起作用

Angular JS:Javascript在自定义指令模板中不起作用

AngularJS自定义指令不起作用

自定义验证指令不起作用

AngularJS自定义指令不起作用

自定义AngularJS指令不起作用

AngularJS自定义指令示例不起作用

点击的Angularjs自定义指令不起作用

自定义指令-双向绑定不起作用

自定义指令在角度模块内不起作用?

Angular 4 / Ionic 3自定义属性指令不起作用

自定义Angular 2指令不起作用

Angular 4自定义指令隐藏元素不起作用

ng-template中的自定义指令不起作用

自定义AngularJS指令名称中包含短划线不起作用

监视工厂对象在自定义指令的控制器中不起作用

scope。$ eval在自定义指令的链接函数中不起作用

确认密码不起作用?

使用jQuery的自定义JavaScript代码在Angular 5(angular-cli)中不起作用

$(this)在.each中的自定义函数中不起作用

实现自定义可见性提供程序时,注释中的MvcSiteMapProvider Visibility指令不起作用

Angular 8:自定义HTML属性在组件html中不起作用

在angular2中<ng-content>上的自定义样式不起作用?

自定义过滤器在Angular Hybrid应用中不起作用

Http在Angular 2自定义异步验证中不起作用

我的自定义管道(过滤器)在Angular 2中不起作用

Angular 6:setTimeout函数在我的自定义验证器中不起作用