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

dxpyg8gm 于 2021-09-29 发布在 Java

关注(0)|答案(1)|浏览(361)

在这个项目中,， 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>

这些验证在何处使用的图片：

validation angularjs

来源：https://stackoverflow.com/questions/67936473/how-can-i-do-ng-minlength-ng-maxlength-validations-correctly-in-angular-js

1条答案

按热度按时间

yfwxisqw1#

很难复制您的示例，但我认为这将为您提供集成所需的所有信息 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>

赞(0）回复(0）举报 2021-09-29

我来回答

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

1条答案

相关问题

热门标签

最新问答