无法隐藏 Angular 密码表单中的匹配消息

Question

你好，我遇到了一个问题我想只在密码匹配或不匹配时显示消息，但消息一直出现有什么建议吗？如果密码不同，我希望无法点击按钮！

@*<form name="form" ng-submit="vm.login()" role="form">*@
<form accept-charset="UTF-8" role="form" id="login-recordar" ng-submit="vm.login()">

    @*New password field!*@
    <div>
        <div class="form-group input-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i><label for="password1">New Password</label>
            </span>
            <input class="form-control" placeholder="Password" name="password" type="password" data-toggle="popover" data-trigger="focus" data-content="Minimum 8 characters long and should contain at least one (small- and capital letter and number)." id="password" value="" required="" autofocus="" onkeypress="capLock(event)" ng-model="mAddEditView.User.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/" />
        </div>
        <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
        <span id="divMayus" style="visibility:hidden">Caps Lock is on!</span>
    </div>

    @*Confirm Password field!*@
    <div>
        <div class="form-group input-group" ng-class="{ 'has-error': form.password1.$dirty && form.password1.$error.required }">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock"></i><label for="password1">Confirm Password</label>
            </span>
            <input class="form-control" placeholder="Password" name="password1" type="password" data-toggle="popover" data-trigger="focus" data-content="The password should match." id="password1" value="" required="" onkeypress="capLock(event)" ng-model="mAddEditView.User.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/" />

        </div>
        <span ng-show="form.password1.$dirty && form.password1.$error.required" class="help-block">Password is required</span>
        <span ng-show="mAddEditView.User.Password !== mAddEditView.User.Password1" class="help-block"><font style="color:red;">Password is not valid!</font></span>
        @* code for checking if password match *@
        <span ng-show="form.password1.$valid && mAddEditView.User.Password === mAddEditView.User.Password1"><font style="color:white;">Password Matched</font></span>


        <span id="divMayus" style="visibility:hidden">Caps Lock is on!</span>
    </div>


    <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block" value="Login" ng-disabled="form.$invalid || vm.dataLoading || errors.mail.isExists || mAddEditView.User.Password !== mAddEditView.User.Password1">
            Change Password
        </button>

    </div>

Answer 1

您还应该检查 password1 是否通过了要求的验证。

ng-show="!form.password1.$error.required && 
         form.password1.$valid && 
         mAddEditView.User.Password === mAddEditView.User.Password1"

Answer 2

您可以将消息的 ng-show 条件更新为

ng-show="form.password1.$valid && form.password1.$dirty && form.password.$dirty && mAddEditView.User.Password === mAddEditView.User.Password1"

因此它只会在用户开始编辑两个字段并根据 RegExp 添加有效密码时显示，然后最后一个条件检查两者是否相同。

*必须进行必要的验证才能使表单无效并避免用户提交。因此，为提交按钮表单添加必需的属性 &。$invalid 将自行处理

无法隐藏 Angular 密码表单中的匹配消息

Cannot hide the match messages in Angular password form

angularjs

angularjs-directive