Telefonnummer mit angular js bestätigen

Question

Möchten Sie die Telefonnummer auf Ziffern setzen, wie kann ich dies mit Angular js tun.

Dies ist, was ich versucht habe:

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

Aber ich bin nicht die Validierung Fehler.

Answer 1

Try this:

<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

Grundsätzlich können Sie einen regulären Ausdruck erstellen Ihre Bedürfnisse zu erfüllen, und dann dieses Muster zu Ihrem Eingabefeld zuweisen.

Oder für einen direkteren Ansatz:

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

Mehr info @ Winkel docs here und here (built-in validators)

Answer 3

Ein noch sauberer und professionelles Aussehen ich gefunden habe, ist AngularUI Maske zu verwenden. Sehr einfach zu implementieren und die Maske kann auch für andere Eingaben angepasst werden. Dann ist eine einfache erforderliche Validierung alles was Sie brauchen.

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

Answer 4

Sie können auch ng-pattern verwenden und ich fühle, dass eine bewährte Methode sein wird. Versuchen Sie ähnlich, ng-message zu verwenden. Bitte schauen Sie sich das ng-pattern-Attribut im folgenden html an. Das Code-Snippet ist unvollständig, aber ich hoffe, Sie verstehen es.

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

Verwendung ng-Muster, in diesem Beispiel Sie einen einfachen Pater mit 10 Zahlen bestätigen können, wenn die Pater nicht übereinstimmt, ist die Meldung anzeigen und die Taste ist deaktiviert.

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

Sie können auch eine andere komplexe Patern verwenden wie

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

, für komplexere Telefonnummern

Answer 7

Sie auch ng-Muster verwenden können, , [7-9] => Handynummer muss mit 7 oder 8 oder 9 beginnen, [0-9] = Handynummer akzeptiert Ziffern, {9} Handynummer sollte 10 Ziffern sein.

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

Verwendung ng-intl-tel-Eingang für alle Länder Mobilfunknummern zu validieren. Sie können auch das Standardland festlegen. auf npm: https://www.npmjs.com/package/ng-intl-tel-input

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