Validate phone number using angular js

Question

Want to set phone-number to 10 digits  How can I do this using Angular js   This is what I have tried    lt form class  form-horizontal  role  form  method  post  name  registration  novalidate gt     lt div class  form-group  ng-class    has-error   registration phone  error number   gt       lt label for  inputPhone  class  col-sm-3 control-label  gt Phone   lt  label gt       lt div class  col-sm-9  gt         lt 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  gt         lt span class  help-block               ng-show  registration phone  error required  amp  amp                        registration phone  error number  gt                       Valid phone number is required        lt  span gt         lt span class  help-block               ng-show    registration password  error minlength                           registration password  error maxlength   amp  amp                         registration phone  dirty    gt                        phone number should be 10 digits         lt  span gt       lt  div gt     lt  div gt   lt  form gt    But I am not getting the validation error

User · Answer

You can also use ng-pattern and I feel that will be a best practice  Similarly try to use ng-message  Please look the ng-pattern attribute on the following html  The code snippet is partial but hope you understand it   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            lt form class  form-horizontal  role  form  method  post  name  registration  novalidate gt     lt div class  form-group  ng-class     has-error     registration phone  invalid    registration phone  pristine    gt       lt label for  inputPhone  class  col-sm-3 control-label  gt Phone   lt  label gt       lt div class  col-sm-9  gt         lt input type  number  class  form-control  ng-pattern  ph numbr   id  inputPhone  name  phone  placeholder  Phone  ng-model  user phone  ng-required  true  gt         lt div class  help-block  ng-messages  registration phone  error  gt           lt p ng-message  required  gt Phone number is required  lt  p gt           lt p ng-message  pattern  gt Phone number is invalid  lt  p gt         lt  div gt       lt  div gt     lt  div gt   lt  form gt

User · Answer

Try this    lt form class  form-horizontal  role  form  method  post  name  registration  novalidate gt       lt div class  form-group  ng-class    has-error   registration phone  error number   gt           lt label for  inputPhone  class  col-sm-3 control-label  gt Phone   lt  label gt           lt div class  col-sm-9  gt               lt 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  gt               lt span class  help-block                     ng-show  registration phone  error required                                registration phone  error number  gt                             Valid phone number is required              lt  span gt               lt span class  help-block                     ng-show    registration phone  error minlength                               registration phone  error maxlength   amp  amp                              registration phone  dirty    gt                             phone number should be 10 digits              lt  span gt

User · Answer

Use ng-pattern  in this example you can validate a simple patern with 10 numbers  when the patern is not matched  the message is show and the button is disabled     lt form  name  phoneNumber  gt            lt label for  numCell  class  text-strong  gt Phone number lt  label gt            lt input id  numCell  type  text  name  inputCelular   ng-model  phoneNumber               class  form-control  required  ng-pattern     0-9  10 10     gt  lt  input gt           lt div class  alert-warning  ng-show  phoneNumber inputCelular  error pattern  gt               lt p gt  write a phone number lt  p gt           lt  div gt        lt button id  button   class  btn btn-success  click-once ng-disabled   phoneNumber  valid  ng-click  callDigitaliza    gt Buscar lt  button gt      Also you can use another complex patern like      d 1 3   -          d 2 3     -     d d d -     d d d d      for more complex phone numbers

User · Answer

You can also use ng-pattern   7-9      mobile number must start with 7 or 8 or 9   0-9    mobile number accepts digits   9  mobile number should be 10 digits    x000D   x000D  function form  scope   x000D       scope onSubmit   function    x000D          alert  form submitted    x000D        x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 5 angular min js  gt  lt  script gt  x000D   lt div ng-app ng-controller  form  gt  x000D   lt form name  myForm  ng-submit  onSubmit    gt  x000D       lt input type  number  ng-model  mobile number  name  mobile number  ng-pattern     7-9  0-9  9     required gt  x000D       lt span ng-show  myForm mobile number  error pattern  gt Please enter valid number  lt  span gt  x000D       lt input type  submit  value  submit   gt  x000D   lt  form gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt div ng-class    has-error   userForm mobileno  error pattern   has-success   userForm mobileno  valid   gt                  lt input type  text  name  mobileno  ng-model  mobileno  ng-pattern     7-9  0-9  9      required gt     Here  userForm  is my form name

User · Answer

lt form name    numberForm  gt       lt div gt       lt input type  number             placeholder    Enter your phonenumber             class    formcontroll             name    numbers             ng-minlength    10             ng-maxlength    10             ng-model  phno  required  gt              lt p ng-show    numberForm numbers  error required                           numberForm numbers  error number  gt                         Valid phone number is required lt  p gt               lt p ng-show      numberForm numbers  error minlength                            numberForm numbers  error maxlength                           amp  amp  numberForm numbers  dirty   gt                          Phone number should be 10 digits lt  p gt  lt br gt  lt br gt          lt  div gt      lt  form gt

User · Answer

Check this answer  Basically you can create a regex to fulfil your needs and then assign that pattern to your input field   Or for a more direct approach    lt input type  number  require ng-pattern   lt your regex here gt   gt    More info   angular docs here and here  built-in validators

User · Answer

An even cleaner and more professional look I have found is to use AngularUI Mask  Very simple to implement and the mask can be customized for other inputs as well  Then a simple required validation is all you need    https   angular-ui github io

User · Answer

use ng-intl-tel-input to validate mobile numbers for all countries  you can set default country also  on npm  https   www npmjs com package ng-intl-tel-input  more details  https   techpituwa wordpress com 2017 03 29 angular-js-phone-number-validation-with-ng-intl-tel-input

[javascript] Validate phone number using angular js

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-validation