of-minlength Angular 表单验证

Question

Angular 似乎没有在下面的代码中引发 minLength 或 maxLength 错误......然而，所需的错误（以及电子邮件错误）正在工作。我知道 ng-minlength 和 ng-maxlength 正在工作，因为输入框正在更改其 CSS。 <span> 中的文本不适用于最小或最大错误。

密码输入见下方：

<section class="row" data-ng-controller="AuthenticationController">
<h3 class="col-md-12 text-center">Sign Up</h3>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-5 col-md-2">
    <form name="userForm" data-ng-submit="userForm.$valid &amp;&amp; signup()" class="signin form-validate" novalidate autocomplete="off">
        <fieldset>
            <div class="form-group">
                <span ng-show="userForm.email.$dirty &amp;&amp; userForm.email.$error.required" class="text-danger">This field is required</span>
                <span ng-show="userForm.email.$dirty &amp;&amp; userForm.email.$error.email" class="text-danger">This field must be a valid email address</span>
            </div>
            <div class="form-group">
                <label for="username" class="control-label">Username</label>
                <input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username">
            </div>
            <div class="form-group">
                <label for="password" class="control-label">Password</label>
                <input type="password" id="password" name="password" class="form-control" required data-ng-model="credentials.password" ng-minlength="8" ng-maxlength="24" placeholder="Password">
                <span ng-show="userForm.password.$dirty &amp;&amp; userForm.password.$error.required" class="text-danger">This field is required</span>
                <span ng-show="userForm.password.$dirty &amp;&amp; userForm.password.$error.minLength" class="text-danger">Please use a password of at least 8 characters</span>
                <span ng-show="userForm.password.$dirty &amp;&amp; userForm.password.$error.maxLength" class="text-danger">The charactar limit for passwords is 24</span>
            </div>
            <div class="text-center form-group mt">
                <button type="submit" class="btn btn-large btn-primary">Sign up</button>&nbsp; or&nbsp;
                <a href="/#!/page/signin" class="show-signup">Sign in</a>
            </div>
            <div data-ng-show="error" class="text-center text-danger">
                <strong data-ng-bind="error"></strong>
            </div>
        </fieldset>
    </form>
</div>

对这里出了什么问题有什么想法吗？

Answer 1

你应该在 ng-show 表达式中将 && 更改为 &&，你必须在控制台中收到错误。

更新后的 ng-show 版本如下所示。

ng-show="userForm.password.$dirty && userForm.password.$error.required"

另一种更方便的方法是使用 ng-messages 指令，根据表单及其字段有效性显示和隐藏验证消息

Answer 2

这只是一个语法错误：userForm.password.$error.minLength 应该是 userForm.password.$error.minlength（大写）。

of-minlength Angular 表单验证

ng-minlength Angular Form Validation

forms

validation

angularjs

angularjs-forms