密码验证在Angular中不起作用

Question

嗨，我正在尝试使用ng-show验证密码，即使密码正确也显示错误消息，并且在刷新页面时也会显示错误消息。

我的代码是：表单名称是：registeruser

<!-- Set a password for the account -->
                        <div class="col-md-12" style="margin: 7px;">
                            <input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" required autocomplete="off" />
                            <!-- Button for viewing password -->
                            <input type="checkbox" id="eye" onclick="if(password.type=='text')password.type='password'; else password.type='text';" />
                        </div>
                        <!-- Error Message for password -->
                        <div class="error-message" ng-show="registeruser.password.$invalid">
                            Please enter at least 6 characters.
                        </div>
                        <div class="error-message" ng-show="registeruser.password.$pristine">
                            Please enter your password.
                        </div>

我用占位符名称，id和模型名称检查了ng-show，但是它不起作用。 另外，如果用户在不输入密码的情况下跳出密码字段，并且在密码字段为空时不在页面加载中，则我希望显示密码错误。

Answer 1

另外使用$dirty和$invalid来显示错误消息。 $dirty由角度设置，以确定用户是否在输入中输入了任何内容。 如果仅在输入获得焦点和失去焦点而没有任何文本时才显示错误消息，则应使用ng-blur/ng-focus来管理输入的输入/退出。 默认情况下，角度管理仅在用户通过$ dirty在输入中插入文本，但是如果用户在不输入文本的情况下输入和退出输入时不检测任何更改。

$dirty使用：

<input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" required autocomplete="off" ng-minlength="6" />
<!-- Error Message for password -->
                    <div class="error-message" ng-show="registeruser.password.$invalid && registeruser.password.$dirty">
                        Please enter at least 6 characters.
                    </div>

Answer 2

尝试这样的事情。 这里的“ formSubmitted”是单击提交按钮时设置的范围变量。 您可以在$ scope.formSubmitted = true之类的控制器中进行设置。 在函数中使用ng-click提交按钮进行调用。 注意：使用ng-minlength来检查至少6个字符的要求。

<div class="col-md-12" style="margin: 7px;">
        <input type="password" id="password" name="password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="password" ng-minlength="6" required autocomplete="off" />
     </div>

    <!-- Error Message for password -->
    <div class="error-message" ng-show="(registeruser.password.$error.minlength && !registeruser.password.$pristine) ||  (registeruser.password.$pristine && formSubmitted)">
           Please enter at least 6 characters.
    </div>
    <div class="error-message" ng-show="(registeruser.password.$error.required && !registeruser.password.$pristine) || (registeruser.password.$pristine && formSubmitted)">
           Please enter your password.
    </div>