Convalidare il numero di telefono usando angular js

Question

Si desidera impostare il numero di telefono su cifre, Come posso farlo utilizzando Angular js.

Questo è quello che ho provato:

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

Ma io non sto ottenendo l'errore di convalida.

Answer 1

Prova questo:

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

Answer 2

Check this answer

In pratica è possibile creare un'espressione regolare per soddisfare le vostre esigenze e quindi assegnare quel modello al vostro campo di input.

O per un approccio più diretto:

<input type="number" require ng-pattern="<your regex here>"> 

Maggiori info @ docs angolari here e here (built-in validators)

Answer 3

Una ancora più pulito e più professionale aspetto che ho trovato è usare AngularUI Mask. Molto semplice da implementare e la maschera può essere personalizzata anche per altri input. Quindi una semplice convalida richiesta è tutto ciò di cui hai bisogno.

https://angular-ui.github.io/

Answer 4

È anche possibile utilizzare ng-pattern e credo che sarà una delle migliori pratiche. Allo stesso modo prova a usare ng-message. Si prega di guardare l'attributo ng-pattern sul seguente html. Lo snippet di codice è parziale, ma spero tu lo capisca.

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> 

Answer 5

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

Answer 6

Usa ng-modello, in questo esempio è possibile convalidare un semplice patern con 10 numeri, quando il patern non corrisponde, il messaggio è spettacolo e il pulsante è disattivato.

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

Inoltre è possibile utilizzare un altro patern complesso come

^+ \ d {1,3} [-.] ((:????? \ D {2,3 }))? [-.] \ d \ d \ d? [-.]? \ d \ d \ d \ d $

, per i numeri di telefono più complessi

Answer 7

È inoltre possibile utilizzare ng-modello [7-9] => il numero di cellulare deve iniziare con 7 o 8 o 9, [0-9] = il numero di cellulare accetta cifre, {9} il numero di cellulare deve essere di 10 cifre.

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>

Answer 8

uso ng-intl-tel-input per convalidare i numeri di cellulari per tutti i paesi. puoi anche impostare il paese predefinito. su npm: https://www.npmjs.com/package/ng-intl-tel-input

maggiori dettagli: https://techpituwa.wordpress.com/2017/03/29/angular-js-phone-number-validation-with-ng-intl-tel-input/