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由angular设置，以确定用户是否在输入上放置任何内容。如果您希望仅在没有任何文本的情况下输入get和lost焦点时显示错误消息，则应使用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

尝试这样的事情。在这里＆＃34; formSubmitted＆＃34;是单击提交按钮时设置的范围变量。您可以在控制器中设置它，如$ scope.formSubmitted = true;在函数内部并使用单击提交按钮来调用它。注意：使用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>

密码验证无法在Angular

2 个答案: