Comment afficher les messages d'erreur pour les valeurs min et max d'un champ de saisie avec type de numéro?

Question

Comment définir/afficher les messages d'erreur pour les valeurs min et max que je définis dans un champ de saisie avec type de numéro en utilisant js angulaire.

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

Answer 1

Ajouter required au champ de saisie.

voici le CODE ÉCHANTILLON et le violon.

https://jsfiddle.net/nc4n61bk/

<form> 

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

Answer 2

simple:

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

ou

<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

S'il vous plaît utiliser ci-dessous le code pour afficher un message d'erreur pour valeur min et max dans le champ de type d'entrée de numéro à l'aide AngularJS validation.

Pour ng-maxlength et ng-minlength pour le champ Type d'entrée numérique.

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

Pour la longueur maximale et la longueur minimale pour le champ Type de saisie de texte.

<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

Vous devez encapsuler le input à l'intérieur du form et afficher conditionnellement l'erreur messages:

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>