AngularJS - ngmaxlength 不适用于 ng-required

debugcn 发表于 Dev

Slimshaddyyy

输入类型

<div class="form-group" ng-class="{ 'has-error': loginForm.password.$dirty && loginForm.password.$error.required }">
    <label for="password">{{ 'PASSWORD' | translate }} <span class="required-field"> *</span></label>
    <input uib-tooltip="{{ 'PLEASE_ENTER_PASSWORD' | translate }}" tooltip-placement="right" data-trigger="hover" type="password"
    name="password" id="password" class="color-tooltip form-control" ng-model="password" ng-maxlength="5" required />
    <span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">{{ 'PASSWORDISREQUIRED' | translate }}</span>
    <span ng-if="!loginForm.password.$valid" class="help-block">The maximum length for password is 5 characters</span>
</div>

当ng-maxlength与required或一起使用时ng-required，即使在输入中没有输入任何内容，它也会显示字符限制的错误消息。相反，它应该仅在输入字符超过长度时才显示错误消息。

Arg0n

将条件更改为 !loginForm.password.$valid && loginForm.password.$error.maxlength

<div class="form-group" ng-class="{ 'has-error': loginForm.password.$dirty && loginForm.password.$error.required }">
  <label for="password">{{ 'PASSWORD' | translate }} <span class="required-field"> *</span></label>
  <input uib-tooltip="{{ 'PLEASE_ENTER_PASSWORD' | translate }}" tooltip-placement="right" data-trigger="hover" type="password" name="password" id="password" class="color-tooltip form-control" ng-model="password" ng-maxlength="5" required />
  <span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">{{ 'PASSWORDISREQUIRED' | translate }}</span>
  <span ng-if="!loginForm.password.$valid && loginForm.password.$error.maxlength" class="help-block">The maximum length for password is 5 characters</span>
</div>

否则，如果该字段有任何错误，它将显示它（空的必填字段）。

例子：

var app = angular.module("my-app", []);
app.controller("my-controller", ["$scope", function($scope) {
  $scope.loginForm = null;
  $scope.password = "";
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="my-app" ng-controller="my-controller" ng-form="loginForm">
  <div class="form-group" ng-class="{ 'has-error': loginForm.password.$dirty && loginForm.password.$error.required }">
    <label for="password">Password <span class="required-field"> *</span></label>
    <input data-trigger="hover" type="password" name="password" id="password" class="color-tooltip form-control" ng-model="password" ng-maxlength="5" required />
    <span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">Password is required</span>
    <span ng-if="!loginForm.password.$valid && loginForm.password.$error.maxlength" class="help-block">The maximum length for password is 5 characters</span>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。