如何显示数字类型输入字段的最小值和最大值的错误消息?

Question

如何使用角度js在数字类型的输入字段上设置的最小值和最大值设置/显示错误消息。

<input type="number" min="0.1" max="30"/> 

Answer 1

请使用以下代码使用 angularjs 验证在数字输入类型字段中显示最小值和最大值的错误消息。

对于 ng-maxlength 和 ng-minlength 对于数字输入类型字段。

<form name="myForm">
<input type="number" name="count" ng-model="count" max="30" min="0.1">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.min">Count should be above 0.1.</span>
<span ng-show="myForm.user.$error.max">Count should be below 30.</span>
</span>
</form>

对于文本输入类型字段的最大长度和最小长度。

<form name="myForm">
<input type="text" name="username" ng-model="username" ng-minlength="5" ng-maxlength="15">
<span style="color:red" ng-show="myForm.username.$dirty && myForm.user.$invalid">
<span ng-show="myForm.username.$error.minlength">Username should be minimum 5 character.</span>
<span ng-show="myForm.username.$error.maxlength">Username should be maximum 15 character.</span>
</span>
</form>

Answer 2

您需要将input封装在form中，并有条件地显示错误消息：

var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.model = {};
});

.error {
color: red;
}
input {
width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<form novalidate name="myForm">
<label for="model.data">Enter Data:</label>
<input type="number" name="data" ng-model="model.data" min="0.1" max="30" />
<div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.min" ng-message="min">Unexpected minimum data</div>
<div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.max" ng-message="max">Unexpected maximum data</div>
</form>
</div>

Answer 3

简单：

<p class="help-block" ng-message="min || max">please enter in between 0.1 to 30.</p>

或

<p class="help-block" ng-message="min">Min 0.1 required</p>
<p class="help-block" ng-message="max">Max 30 Allowd</p>

Answer 4

将required添加到输入字段。

这是示例代码和小提琴。

https://jsfiddle.net/nc4n61bk/

<form>
<input type="number" min="0.1" max="30" required/> 
<input type="submit"/>
</form>

Answer 5

var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.model = {};
});

.error {
color: red;
}
input {
width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<form novalidate name="myForm">
<label for="model.data">Enter Data:</label>
<input type="number" name="data" ng-model="model.data" min="0.1" max="30" />
<div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.min" ng-message="min">Unexpected minimum data</div>
<div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.max" ng-message="max">Unexpected maximum data</div>
</form>
</div>

Answer 6

.valueError{
color: rgb(255, 0, 0);
padding-top: 5px;
}   

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
<form novalidate name="myForm">
<div class="form-field required-field">
<label for="field-value">Value</label>
<input type="number" id="field-value" name="valueInput" class="small form-control input-md ng-valid ng-dirty" ng-model="value" min="5" placeholder="Value"/>
<div class="valueError" ng-show="form.value.$dirty && form.value.$error.min "> Value must be atleast 5min</div>
</div>
</form>
</div>