如何在 angular.js 中正确进行 ng-minlength、ng-maxlength 验证？

Question

在项目中，required、max-size-number、min-size-number 部分工作，但 pattern、minlength 和 maxlength 部分不工作，

我该如何纠正这个问题？

这里是相关的代码部分；

<div ng-switch-when="TextBox">
  <label class="item item-input item-stacked-label">
         <span ng-if="haveHeader" class="input-label">{{header}}</span>
         <input  type="text"  style="width:100%"
                 event="component.events" 
                 validation="component"
                 ng-blur="isInAdminFormPage && checkTextTypeNumberValidation(component.shortName)"
                 name="name{{component.shortName}}" 
                 metadata="component.options" ng-disabled="isFormViewed"  string-to-date="component.options" ng-required="requiredValidation[component.shortName]"
                 ng-model="formData[component.shortName]" string-to-number="component.options" >
    </label>
  <br>

  <div ng-if="componentValidationType[component.shortName] == validationType.VALIDATION">
    <div style="color: red" ng-messages="getFormValidations(form.shortName)['name'+component.shortName].$error" ng-show="isInAdminFormPage && formInf.mainForm.$submitted">
      <div ng-message="required">{{message["required"]}}</div>
      <div ng-message="minlength">{{message["minlength"]}}</div>
      <div ng-message="maxlength">{{message["maxlength"]}}</div>
      <div ng-message="ng-pattern">{{message["ng-pattern"]}}</div>
    </div>
    <div ng-if="isInAdminFormPage" style="color: red" ng-show="showValidationMessageOfTextBox(component.shortName)  && formInf.mainForm.$submitted">
      <div ng-show="!maxNumberValidation[component.shortName].validation">{{message["max-number-size"]}}</div>
      <div ng-show="!minNumberValidation[component.shortName].validation">{{message["min-number-size"]}}</div>

    </div>
  </div>

使用这些验证的地方的图片：

Answer 1

很难复制您的示例，但我认为这将为您提供集成 ng-pattern、ng-minlength 和 ng-maxlength 所需的所有信息，以及如何监听它们的验证器。

'use strict';

var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.theInput = '';
  $scope.minlength = 5;
  $scope.maxlength = 10;
  $scope.thePattern = /^[a-zA-Z\s]*$/; ///^[a-zA-Z]\w{3,14}$/;

  $scope.theNumberInput = '';
  $scope.theNumberPattern = /^((?!5)[0-9]){1,3}$/; ///^[a-zA-Z]\w{3,14}$/;


}]);

.error {
  margin: 10px 0;
  padding: 5px;
  background-color: #eee;
  color: #f00;
  border: 1px solid #ccc;
}

input.ng-dirty.ng-invalid {
  background-color: #f65b90;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div id="mainContainer" ng-app="app" ng-controller="MainCtrl">
  <ng-form role="form" name="theForm" novalidate>
    <p>
      Enter a word between 5 and 10 characters long - no numbers, no periods
    </p>
    <input type="text" ng-required="true" name="theInput" ng-model="theInput" ng-maxlength="{{maxlength}}" ng-minlength="{{minlength}}" ng-pattern='thePattern' />
    <div class='feedback' ng-if='theForm.$dirty'>
      <div ng-show="!theForm.theInput.$valid" class="error">
        Not valid
      </div>
      <div ng-show="theForm.theInput.$error.pattern" class="error">
        Input pattern is not valid.
      </div>
      <div ng-show="theForm.theInput.$error.minlength" class="error">
        Input length is less than the min length ({{minlength}}) </div>
      <div ng-show="theForm.theInput.$error.maxlength" class="error">
        Input length is greater than the max length ({{maxlength}})
      </div>
    </div>
    <p>
      Enter a number between 1 and 999 with no 5's in it
    </p>
    <input type="number" ng-required="true" name="theNumberInput" ng-model="theNumberInput" ng-pattern='theNumberPattern' />
    <div class='feedback'>
      <div ng-show="theForm.theNumberInput.$error.pattern" class="error">
        Input pattern is not valid.
      </div>

    </div>
  </ng-form>
</div>