堆栈内存溢出
  繁体   English   中英

如何在Angular JS中设置最大值和最小值？

[英]How to set max and min value in angular js?

 原文  2016-07-04 10:59:57  5   4    javascript/ angularjs

问题描述

我有以下标记： 

<div class="input-group-icon">Max <span class="error">*</span>
<div class="input-group">
    <!--<input style="border-right:none;" name="available_funds_max" ng-model="attributes.available_funds_max"  max="{{constants.globalValue.availablemaxNumber}}" min="{{attributes.available_funds_min}}" type="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" required class="form-control input-sm m-bot15" />--> 
    <input style="border-right:none;" name="available_funds_max" ng-model="attributes.available_funds_max"  ng-maxlength="15"  ng-minlength="1"  type="text" required  class="form-control input-sm m-bot15"  format="number" ng-max="{{constants.globalValue.availablemaxNumber}}" ng-min="{{attributes.available_funds_min}}"/> 
    <span style="border-left:none; background:none; border-color:#e2e2e4; border-radius:0;" class="input-group-addon" id="basic-addon2">{{programname.country.currency_symbol?programname.country.currency_symbol:'$'}}</span> </div>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.required" class="error">{{formValidation.required}}</label> 
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.min" class="error"> {{formValidation.minMax}} </label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.max" class="error"> {{formValidation.anumberMin}} </label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.number" class="error"> {{formValidation.errorNumber}} </label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.maxlength" class="error">Max value too long</label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.minlength" class="error">Max value too short</label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_min.$error.lowerThan" class="error">Value must be greater than min value</label>
</div>

我已经在<input type="text" />设置了max和min 。 输入最大值或最小值后，如何显示验证错误？

我想用min和max来验证该字段，因为我不想允许十亿个数字，而只能允许某个最大值。 如何验证输入字段并显示验证错误消息？

4 个解决方案

解决方案1
 5  2016-07-04 12:52:40

这是一个片段，仅使用ngMessages ： 

 (function() { 'use strict'; angular.module('app', ['ngMessages']) .controller('mainCtrl', function($scope) { $scope.min = 5; $scope.max = 99; }); })(); 
 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.6/angular-messages.min.js"></script> </head> <body ng-controller="mainCtrl"> <form name="form"> <label for="input">Input field:</label> <input type="number" name="input" min="{{min}}" max="{{max}}" ng-model="input" required step="0.01" /> <div ng-messages="form.input.$error" style="color: #ff0000" role="alert" ng-if="form.input.$dirty"> <div ng-message="required">This field is required</div> <div ng-message="min">This field must be at least {{min}}.</div> <div ng-message="max">This field must be at max {{max}}.</div> <div ng-message="number">Not a valid number.</div> </div> </form> </body> </html>

解决方案2
 1  2018-04-09 11:24:42

设置最小值。 它应该是数字 

 <input type="text" ng-model="bundle.quantity" name="quantity" class="form-control text-right" placeholder="" ng-min="1" required>

如果该属性值为数字，则它将显示，否则它将从DOM中删除并使其形式无效。 简单地，它将不允许无效值 

app.directive('ngMin', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMin, function() {
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var minValidator = function(value) {
                var min = attr.ngMin || 0;
                if (!isEmpty(value) && value < min) {
                    ctrl.$setValidity('ngMin', false);
                    return undefined;
                } else {
                    ctrl.$setValidity('ngMin', true);
                    return value;
                }
            };
            ctrl.$parsers.push(minValidator);
            ctrl.$formatters.push(minValidator);
        }
    };
});

解决方案3
 0  2016-07-04 11:16:16

如果要在文本输入中设置最大值和最小值，则可以使用ng-minlength和ng-maxlength。 将您的输入包装在表单内，并在表单输入值上调用$ valid，以查看输入是否有效。

可以这样使用： 

<form name="myForm">
    <label>
       User name:
       <input type="text" name="userName" ng-model="name" required ng-minlength="1" ng-maxlength="4">
    </label>
    <div role="alert">
      <span class="error" ng-show="!myForm.userName.$valid">
       Required!</span>
    </div>
</form>

仅当名称为userName的输入无效时，才显示跨度。 这是一个矮人

解决方案4
 0  2016-07-04 11:24:21

我建议使用Angular ngMessages指令。 然后，您可以将您的错误消息归为此类，并且非常容易使用： 

 var app = angular.module('app', ['ngMessages']); 
 div[role="alert"] { margin: 10px 0; } 
 <html> <head></head> <body ng-app="app"> <form name="demoForm"> <label for="myField">Text field:</label><br> <input type="text" name="myField" ng-model="field" ng-minlength="5" ng-maxlength="20" required /> <div ng-messages="demoForm.myField.$error" role="alert"> <div ng-message="required">This field is required</div> <div ng-message="minlength">This field should be at least 5 characters long</div> <div ng-message="maxlength">This field should be less than 20 characters long</div> </div> <label for="myField2">Number field:</label><br> <input type="number" name="myField2" ng-model="field2" ng-minlength="5" ng-maxlength="20" required /> <div ng-messages="demoForm.myField2.$error" role="alert"> <div ng-message="required">This field is required</div> <div ng-message="minlength">This field should be at least 5 characters long</div> <div ng-message="maxlength">This field should be less than 20 characters long</div> </div> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script> </body>

官方文档： https : //docs.angularjs.org/api/ngMessages/directive/ngMessages

根据评论进行编辑：

我想我现在明白了您想要的是什么。 请查看以下代码片段以获取答案。 我为您可以设置的最小值和最大值设置了自定义指令，这些指令将验证输入。 输入中还有一个使用ng-pattern的模式检查，该检查将允许数字，逗号和点并相应地显示错误（您可以对其进行修改以不允许插入除数字和逗号等以外的任何内容）。 请根据您的需要进行修改，但是我认为这是您的一个很好的起点。 

 var app = angular.module('app', ['ngMessages']); app.directive('customMin', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, elem, attr, ctrl) { var minValidator = function (value) { var min = scope.$eval(attr.customMin) || 0; if (value) { value = value.replace(/[^0-9]/g, ''); } console.log(value); if (!isEmpty(value) && value < min) { ctrl.$setValidity('customMin', false); return undefined; } else { ctrl.$setValidity('customMin', true); return value; } }; ctrl.$parsers.push(minValidator); ctrl.$formatters.push(minValidator); } }; }); app.directive('customMax', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, elem, attr, ctrl) { var maxValidator = function (value) { var max = scope.$eval(attr.customMax) || Infinity; if (value) { value = value.replace(/[^0-9]/g, ''); } console.log(value); if (!isEmpty(value) && value > max) { ctrl.$setValidity('customMax', false); return undefined; } else { ctrl.$setValidity('customMax', true); return value; } }; ctrl.$parsers.push(maxValidator); ctrl.$formatters.push(maxValidator); } }; }); function isEmpty(value) { return angular.isUndefined(value) || value === '' || value === null || value !== value; } 
 <html> <body> <div ng-app="app"> <form name="myForm"> Value: <input type="text" ng-model="value" ng-pattern="/[0-9]+([\\.,][0-9]+)*/" custom-min="5" custom-max="20000" name="value" /> <div ng-messages="myForm.value.$error" role="alert"> <div ng-message="pattern">There are some characters that are not allowed</div> <div ng-message="customMin">This field should be at least value of 5</div> <div ng-message="customMax">This field should be at most value 20,000</div> </div> <br> <tt>value = {{value}}</tt> <br> <tt>value.$valid = {{myForm.value.$valid}}</tt> <br> <tt>value.$error = {{myForm.value.$error}}</tt> </form> </div> <script src="https://code.angularjs.org/1.4.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.4.8/angular-messages.min.js"></script> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何设置js变量的最小和最大边界？ 如何在引导 timePicker 中设置最小值和最大值？ Javascript如何设置最大值和最小值 如何在html中设置年份的最大值和最小值 （Chart.js）如何将最小值（如果可以的话，最大值）设置为特定数字？ 如何根据选择Angular动态设置输入控件的最小值和最大值 Angular 2 Ionic 2 - 如何将日期输入的最大或最小日期设置为今天？ 角rzslider：最小值的最大值和最大值的最小值； 范围滑杆 如何在 Alpine.JS 中为变量设置最小/最大值 如何使用JS或JQUERY为元素的ID设置缩放的最大和最小限制？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM