我有以下标记：
<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>
我在max中设置了min和<input type="text" />值。如果输入了最大值或最小值，如何显示验证错误？
我想使用min和max值来验证字段，因为我不想允许数十亿中的数字，但只允许达到某个最大值。如何验证输入字段并显示验证错误消息？
答案 0 :(得分：5)
这是一个代码片段，仅使用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>
答案 1 :(得分：1)
设置最小值。它应该是数字
<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);
}
};
});
答案 2 :(得分：0)
如果要在文本输入上设置最大值和最小值，可以使用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的输入无效时，才会显示范围。 Here是一名掠夺者
答案 3 :(得分：0)
我建议使用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>