Angular似乎在以下代码中没有增加最小值或最大值错误...但是,所需的错误(以及电子邮件错误)正在起作用。我知道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 && signup()" class="signin form-validate" novalidate autocomplete="off">
<fieldset>
<div class="form-group">
<span ng-show="userForm.email.$dirty && userForm.email.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.email.$dirty && 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 && userForm.password.$error.required" class="text-danger">This field is required</span>
<span ng-show="userForm.password.$dirty && userForm.password.$error.minLength" class="text-danger">Please use a password of at least 8 characters</span>
<span ng-show="userForm.password.$dirty && 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> or
<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>
对这里出了什么问题的想法?
这只是一个语法错误: userForm.password.$error.minLength
应该是 userForm.password.$error.minlength
(capledization)。
您应该在ng-show
表达式中将&&
更改为&&
,您必须在控制台中获得错误。
更新的ng-show
版本将看起来像下面的。
ng-show="userForm.password.$dirty && userForm.password.$error.required"
另一种更方便的方法是使用ng-messages
指令,以基于表单&amp;它的场有效性