blocks|key|6100421|text|将required添加到输入字段。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|6100422|下面是示例代码和小提琴。|6100423|https://jsfiddle.net/nc4n61bk/|6100424|<form>

<input+type="number"+min="0.1"+max="30"+required/>+
<input+type="submit"/>
</form>|code-block|syntax|javascript|6100425|entityMap|0|LINK|mutability|MUTABLE|url^0|1|8|0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|I]]]]

<p>Add <code>required</code> to input field. </p>

<p>here is SAMPLE CODE and fiddle.</p>

<p><a href="https://jsfiddle.net/nc4n61bk/" rel="nofollow noreferrer">https://jsfiddle.net/nc4n61bk/</a></p>

<pre><code>&lt;form&gt;

&lt;input type="number" min="0.1" max="30" required/&gt; 
&lt;input type="submit"/&gt;
&lt;/form&gt;
</code></pre>


blocks|key|4686569|text|简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4686570|+<p+class="help-block"+ng-message="min+%7C%7C+max">please+enter+in+between+0.1+to+30.</p>|code-block|syntax|javascript|4686571|或|4686572|<p+class="help-block"+ng-message="min">Min+0.1+required</p>
<p+class="help-block"+ng-message="max">Max+30+Allowd</p>|4686573|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Simple :</p>

<pre><code> &lt;p class="help-block" ng-message="min || max"&gt;please enter in between 0.1 to 30.&lt;/p&gt;
</code></pre>

<p>or </p>

<pre><code>&lt;p class="help-block" ng-message="min"&gt;Min 0.1 required&lt;/p&gt;
&lt;p class="help-block" ng-message="max"&gt;Max 30 Allowd&lt;/p&gt;
</code></pre>


blocks|key|1901298|text|请使用以下代码显示使用angularjs验证的数字输入类型字段中的最小值和最大值的错误消息。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1901299|对于数字输入类型字段的ng-maxlength和ng-minlength。|1901300|<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>|code-block|syntax|javascript|1901301|对于文本输入类型字段的maxlength和minlength。|1901302|<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>|1901303|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p><em>Please use below code to show error message for min and max value in number input type field using angularjs validation.</em></p>

<p>For ng-maxlength and ng-minlength for Number input type field.</p>

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

<p>For maxlength and minlength for Text input type field.</p>

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


blocks|key|4686608|text|您需要将input封装在form中，并有条件地显示错误消息：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4686609|​|4686610|var+app+=+angular.module('app',+[]);

app.controller('test',+function($scope)+{
++$scope.model+=+{};
});|code-block|syntax|javascript|4686611|.error+{
++color:+red;
}

input+{
++width:+100px;
}|4686612|<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>|4686613|4686614|entityMap^0|4|5|C|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>You need to encapsulate the <code>input</code> inside the <code>form</code> and conditionally display the <em>error</em> messages:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);

app.controller('test', function($scope) {
  $scope.model = {};
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.error {
  color: red;
}

input {
  width: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="app" ng-controller="test"&gt;
  &lt;form novalidate name="myForm"&gt;
    &lt;label for="model.data"&gt;Enter Data:&lt;/label&gt;
    &lt;input type="number" name="data" ng-model="model.data" min="0.1" max="30" /&gt;
    &lt;div class="error" ng-show="myForm.data.$dirty &amp;&amp; myForm.data.$error.min" ng-message="min"&gt;Unexpected minimum data&lt;/div&gt;
    &lt;div class="error" ng-show="myForm.data.$dirty &amp;&amp; myForm.data.$error.max" ng-message="max"&gt;Unexpected maximum data&lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4686616|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4686617|var+app+=+angular.module('app',+[]);

app.controller('test',+function($scope)+{
++$scope.model+=+{};
});|code-block|syntax|javascript|4686618|.error+{
++color:+red;
}

input+{
++width:+100px;
}|4686619|<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>|4686620|4686621|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);

app.controller('test', function($scope) {
  $scope.model = {};
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.error {
  color: red;
}

input {
  width: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="app" ng-controller="test"&gt;
  &lt;form novalidate name="myForm"&gt;
    &lt;label for="model.data"&gt;Enter Data:&lt;/label&gt;
    &lt;input type="number" name="data" ng-model="model.data" min="0.1" max="30" /&gt;
    &lt;div class="error" ng-show="myForm.data.$dirty &amp;&amp; myForm.data.$error.min" ng-message="min"&gt;Unexpected minimum data&lt;/div&gt;
    &lt;div class="error" ng-show="myForm.data.$dirty &amp;&amp; myForm.data.$error.max" ng-message="max"&gt;Unexpected maximum data&lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|6100489|text|.valueError{
+++color:+rgb(255,+0,+0);
+++padding-top:+5px;
}+++|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|6100490|<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>|6100491|unstyled|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$B|C]]|$1|F|3|-4|5|G|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre class="lang-css prettyprint-override"><code>.valueError{
   color: rgb(255, 0, 0);
   padding-top: 5px;
}   
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="app" ng-controller="test"&gt;
 &lt;form novalidate name="myForm"&gt;
&lt;div class="form-field required-field"&gt;
&lt;label for="field-value"&gt;Value&lt;/label&gt;
&lt;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"/&gt;
&lt;div class="valueError" ng-show="form.value.$dirty &amp;&amp; form.value.$error.min "&gt; Value must be atleast 5min&lt;/div&gt;
&lt;/div&gt;
 &lt;/form&gt;
&lt;/div&gt;
</code></pre>




<p>How do I set/show error messages for min and max values that I set on an input field with number type using angular js. </p>

<pre><code>&lt;input type="number" min="0.1" max="30"/&gt; 
</code></pre>


How to show error messages for min and max values of an input field with number type?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何设置/显示我使用angular js在数字类型的输入字段上设置的最小值和最大值的错误信息。<input type="number" min="0.1" max="30"/> 

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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