Valider le numéro de téléphone en utilisant js angulaire
Vouloir régler le numéro de téléphone sur 10 chiffres, comment puis-je faire cela en utilisant Angular js.
C'est ce que j'ai essayé:
<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
<div class="form-group" ng-class="{'has-error': registration.phone.$error.number}">
<label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
<div class="col-sm-9">
<input type="number"
class="form-control"
ng-minlength="10"
ng-maxlength="10"
id="inputPhone"
name="phone"
placeholder="Phone"
ng-model="user.phone"
ng-required="true">
<span class="help-block"
ng-show="registration.phone.$error.required &&
registration.phone.$error.number">
Valid phone number is required
</span>
<span class="help-block"
ng-show="((registration.password.$error.minlength ||
registration.password.$error.maxlength) &&
registration.phone.$dirty) ">
phone number should be 10 digits
</span>
</div>
</div>
</form>
Mais je ne reçois pas l'erreur de validation.
Essaye ça:
<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
<div class="form-group" ng-class="{'has-error': registration.phone.$error.number}">
<label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
<div class="col-sm-9">
<input type="number"
class="form-control"
ng-minlength="10"
ng-maxlength="10"
id="inputPhone"
name="phone"
placeholder="Phone"
ng-model="user.phone"
ng-required="true">
<span class="help-block"
ng-show="registration.phone.$error.required ||
registration.phone.$error.number">
Valid phone number is required
</span>
<span class="help-block"
ng-show="((registration.phone.$error.minlength ||
registration.phone.$error.maxlength) &&
registration.phone.$dirty) ">
phone number should be 10 digits
</span>
En gros, vous pouvez créer une expression rationnelle pour répondre à vos besoins, puis affecter ce modèle à votre champ de saisie.
Ou pour une approche plus directe:
<input type="number" require ng-pattern="<your regex here>">
Plus d'infos @ angular docs ici et ici (validateurs intégrés)
Vous pouvez également utiliser ng-pattern, [7-9] => le numéro de portable doit commencer par 7 ou 8 ou 9, [0-9] = le numéro de portable accepte les chiffres, {9} le numéro de portable doit comporter 10 chiffres.
function form($scope){
$scope.onSubmit = function(){
alert("form submitted");
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app ng-controller="form">
<form name="myForm" ng-submit="onSubmit()">
<input type="number" ng-model="mobile_number" name="mobile_number" ng-pattern="/^[7-9][0-9]{9}$/" required>
<span ng-show="myForm.mobile_number.$error.pattern">Please enter valid number!</span>
<input type="submit" value="submit"/>
</form>
</div>Vous pouvez également utiliser ng-pattern et j'estime que ce sera une pratique exemplaire. De même, essayez d'utiliser ng-message. Veuillez rechercher l'attribut ng-pattern sur le code HTML suivant. L'extrait de code est partiel, mais espérons que vous le comprendrez.
angular.module('myApp', ['ngMessages']);
angular.module("myApp.controllers",[]).controller("registerCtrl", function($scope, Client) {
$scope.ph_numbr = /^(\+?(\d{1}|\d{2}|\d{3})[- ]?)?\d{3}[- ]?\d{3}[- ]?\d{4}$/;
});
<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
<div class="form-group" ng-class="{ 'has-error' : (registration.phone.$invalid || registration.phone.$pristine)}">
<label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
<div class="col-sm-9">
<input type="number" class="form-control" ng-pattern="ph_numbr" id="inputPhone" name="phone" placeholder="Phone" ng-model="user.phone" ng-required="true">
<div class="help-block" ng-messages="registration.phone.$error">
<p ng-message="required">Phone number is required.</p>
<p ng-message="pattern">Phone number is invalid.</p>
</div>
</div>
</div>
</form>
utilisez ng-intl-tel-input pour valider les numéros de téléphone portable de tous les pays. vous pouvez également définir le pays par défaut . on npm: https://www.npmjs.com/package/ng-intl-tel-input
plus de détails: https://techpituwa.wordpress.com/2017/03/29/angular-js-phone-number-validation-with-ng-int-tel-input/
Un look encore plus propre et plus professionnel que j'ai trouvé est d'utiliser le masque AngularUI. Très simple à mettre en œuvre, le masque peut également être personnalisé pour d’autres entrées. Ensuite, une simple validation requise suffit.
<form name = "numberForm">
<div>
<input type="number"
placeholder = "Enter your phonenumber"
class = "formcontroll"
name = "numbers"
ng-minlength = "10"
ng-maxlength = "10"
ng-model="phno" required/>
<p ng-show = "numberForm.numbers.$error.required ||
numberForm.numbers.$error.number">
Valid phone number is required</p>
<p ng-show = "((numberForm.numbers.$error.minlength ||
numberForm.numbers.$error.maxlength)
&& numberForm.numbers.$dirty)">
Phone number should be 10 digits</p><br><br>
</div>
</form>
Utilisez ng-pattern. Dans cet exemple, vous pouvez valider un modèle simple avec 10 chiffres. Lorsque le modèle ne correspond pas, le message est affiché et le bouton est désactivé.
<form name="phoneNumber">
<label for="numCell" class="text-strong">Phone number</label>
<input id="numCell" type="text" name="inputCelular" ng-model="phoneNumber"
class="form-control" required ng-pattern="/^[0-9]{10,10}$/"></input>
<div class="alert-warning" ng-show="phoneNumber.inputCelular.$error.pattern">
<p> write a phone number</p>
</div>
<button id="button" class="btn btn-success" click-once ng-disabled="!phoneNumber.$valid" ng-click="callDigitaliza()">Buscar</button>
Aussi, vous pouvez utiliser un autre modèle complexe comme
^ +?\d {1,3}? [-.]? (? (?:\d {2,3}))? [-.]?\d\d\d [d. d\d\d $
, pour des numéros de téléphone plus complexes
<div ng-class="{'has-error': userForm.mobileno.$error.pattern ,'has-success': userForm.mobileno.$valid}">
<input type="text" name="mobileno" ng-model="mobileno" ng-pattern="/^[7-9][0-9]{9}$/" required>
Ici "userForm" est le nom de mon formulaire.