数値型の入力フィールドの最小値と最大値のエラーメッセージを表示するにはどうすればよいですか？

Question

angle jsを使用して、数値型の入力フィールドに設定した最小値および最大値のエラーメッセージを設定または表示するにはどうすればよいですか？

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

Answer 1

入力フィールドにrequiredを追加します。

ここにサンプルコードとフィドルがあります。

https://jsfiddle.net/nc4n61bk/

<form> 

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

Answer 2

単純：

<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 3

angularjsを使用して番号入力タイプフィールドに最小値と最大値のためのエラーメッセージを表示するコードの下に使用してください検証。

Number入力タイプフィールドの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> 

テキスト入力タイプのフィールドでは、maxlengthとminlengthになります。あなたはform内inputをカプセル化し、条件付きでエラーメッセージを表示する必要が

<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 4

：

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>