angular js验证不能使用自己的指令

时间:2013-11-13 16:00:09

标签: angularjs

我正在使用角度js指令,但它不起作用可以知道我做错了什么我遵循angular js文档但不工作是否有任何库需要我的形式有问题。

loginView.html

<form class="form-horizontal" name="user_form" novalidate ng-submit='login()'>
                <div class="modal-header">
                    <h3>Login</h3>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="login-Name" class="col-lg-3 form-label">User Name:</label>
                        <div class="col-lg-8">
                            <input type="email" class="form-control" id="login-Name" ng-model="user.username" name="login-Name" placeholder="User Name" required/>
                            <div class="error" ng-show="user_form.login-Name.$dirty && user_form.login-Name.$invalid">
                                <small class="error" ng-show="user_form.login-Name.$error.required">
                                    User name is required.
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="login-Password" class="col-lg-3 form-label">Password:</label>
                        <div class="col-lg-8">
                            <input type="password" class="form-control" id="login-Password" ng-model="user.password" name="login-Password" placeholder="Password" ng-minlength=6 ng-maxlength=20 required/>
                            <div class="error" ng-show="user_form.login-Password.$dirty && user_form.login-Password.$invalid">
                                <small class="error" ng-show="user_form.login-Password.$error.required">
                                    Your Password is required.
                                </small>
                                <small class="error" ng-show="user_form.login-Password.$error.minlength">
                                    Your Password is required to be at least 6 characters
                                </small>
                                <small class="error" ng-show="user_form.login-Password.$error.maxlength">
                                    Your Password cannot be longer than 20 characters
                                </small>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="icon-user icon-white"></i> Login
                    </button>
                </div>

            </form>

1 个答案:

答案 0 :(得分:0)

您的代码中有2个错误。

首先,您在字段中使用了 - id(login-Name和login-Password)。用_(login_Name和login_Password)替换它们。 Angularjs将它们视为substract运算符,并且不返回要在ng-show指令中进行求值的对象。

对于用户名(电子邮件地址),您的错误将永远不会显示,因为只要字段不为空,$ error.required就会设置为false,如果字段为空,则$ dirty设置为false。你的两个条件不能同时成立。

对于密码,您在必填字段时遇到同样的问题,但如果您更改了ID,则其他2个验证将有效。

工作示例:Plunker