首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何显示number类型输入字段的最小值和最大值的错误消息?

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

Stack Overflow用户
提问于 2017-05-16 14:34:09
回答 6查看 21K关注 0票数 6

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

代码语言:javascript
运行
复制
<input type="number" min="0.1" max="30"/> 
EN

回答 6

Stack Overflow用户

发布于 2017-05-16 14:43:44

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

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

代码语言:javascript
运行
复制
<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>

对于文本输入类型字段的maxlength和minlength。

代码语言:javascript
运行
复制
<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>
票数 9
EN

Stack Overflow用户

发布于 2017-05-16 14:52:09

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

代码语言:javascript
运行
复制
var app = angular.module('app', []);

app.controller('test', function($scope) {
  $scope.model = {};
});
代码语言:javascript
运行
复制
.error {
  color: red;
}

input {
  width: 100px;
}
代码语言:javascript
运行
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2017-05-16 14:40:10

简单:

代码语言:javascript
运行
复制
 <p class="help-block" ng-message="min || max">please enter in between 0.1 to 30.</p>

代码语言:javascript
运行
复制
<p class="help-block" ng-message="min">Min 0.1 required</p>
<p class="help-block" ng-message="max">Max 30 Allowd</p>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43994035

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档