How to Validate Mobile Number for Countries in Angular

let regex = /^[+]\d{12}$/; // enter the total number if digits you want
let correct = '+911234567890'let inCorrect = '911234567890'
console.log(regex.test(correct))console.log(regex.test(inCorrect))

How to get country code and phone number separately and validate length of the ph number based on country code in javascript?

I have Installed these two libraries.
1) "ngx-mat-intl-tel-input": "^3.0.0",
2) "libphonenumber-js": "^1.7.51"
it works perfectly for me.. I can able to get dialCode and phone number seperatly in this library.And its validating length also..

(Angular2/4/5/6) How to validate length of international phone numbers according to country

This is my custom solution. It works fine on my solutions.

Please install intl-tel-input to your project

npm i intl-tel-input --save

Then create a IntlTelInputComponent component as follows.

intl-tel-input.component.ts

import {
  AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild, forwardRef, Renderer
} from '@angular/core';
import 'intl-tel-input';
import * as jQuery from 'jquery';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, } from '@angular/forms';

export interface ITimeInputFieldChanged {
  value: string;
  extension: string;
  numberType: string,
  valid: boolean;
  validationError: any
}

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => IntlTelInputComponent),
  multi: true
};

const noop = () => {
};

@Component({
  selector: 'intl-tel-input',
  templateUrl: './intl-tel-input.component.html',
  styleUrls: ['./intl-tel-input.component.scss'],
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})

export class IntlTelInputComponent implements ControlValueAccessor {

  @Input() fullValue: string;
  @Output() fullValueChange = new EventEmitter<ITimeInputFieldChanged>();
  @Input() id: string;
  @Input() intlOptions = {
    initialCountry: 'no',
    formatOnDisplay: true,
    separateDialCode: true,
    onlyCountries: ['no', 'be']
  };
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();
  @Output() valueBlur = new EventEmitter<string>();
  @Output() valueFocus = new EventEmitter();
  @ViewChild('intlInput') intlInput: ElementRef;

  private extension: string;

  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  constructor(
    private _renderer: Renderer) { }

  onInputChange(value: string) {
    const intlInput = jQuery(this.intlInput.nativeElement)
    this.value = value;
    this.valueChange.emit(value);
    this.fullValue = intlInput.intlTelInput('getNumber');
    this.extension = intlInput.intlTelInput('getSelectedCountryData').dialCode;
    const validationErrorCode = intlInput.intlTelInput('getValidationError');
    let validationMessage = 'VALID';
    switch (validationErrorCode) {
      case 1:
        validationMessage = 'INVALID_COUNTRY_CODE'
        break;
      case 2:
        validationMessage = 'TOO_SHORT'
        break;
      case 3:
        validationMessage = 'TOO_LONG'
        break;
      case 4:
        validationMessage = 'NOT_A_NUMBER'
        break;
      case 5:
        break;
      default:
        validationMessage = 'VALID'
        break;
    }
    this.fullValueChange.emit({
      value: value,
      extension: this.extension,
      numberType: intlInput.intlTelInput('getNumberType'),
      valid: intlInput.intlTelInput('isValidNumber'),
      validationError: validationMessage
    });
    // this.writeValue(this.fullValue);
  }

  onBlur(value: string) {
    this.valueBlur.emit(value);
  }

  onFocus() {
    this.valueFocus.emit();
  }

  writeValue(value: any): void {

    if (value && (value !== this.value)) {
      this.fullValue = value;
      setTimeout(() => {
        const phoneInput = jQuery(`input#${this.id}`);
        phoneInput.intlTelInput('setNumber', this.fullValue);
      }, 100);
    }
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: () => any): void { this.onTouchedCallback = fn; }

  setDisabledState?(isDisabled: boolean): void {
    throw new Error('Method not implemented.');
  }

}

intl-tel-input.component.html

<input #intlInput class="form-control"
[appIntlTelInput]="intlOptions"
[id]="id"
[ngModel]="value"
(ngModelChange)="onInputChange($event)"
(blur)="onBlur($event)"
(focus)="onFocus()"
>

intl-tel-input.component.scss

:host /deep/.intl-tel-input{
    display: block;
    .country-list{
        overflow-y: auto;
    }
}

intl-tel-input.directive.ts

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import 'intl-tel-input';
import * as jQuery from 'jquery';

@Directive({
  selector: '[appIntlTelInput]'
})
export class IntlTelInputDirective implements OnInit {

  @Input('appIntlTelInput') appIntlTelInput: any;
  constructor(private el: ElementRef) { }

  ngOnInit() {
    // jQuery.fn.intlTelInput.loadUtils('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.12/js/utils.js');
    // jQuery.fn.intlTelInput.loadUtils('/intl-tel-input/build/js/utils.js');
    jQuery.fn.intlTelInput.loadUtils('assets/js/utils.js');
    jQuery(this.el.nativeElement).intlTelInput(this.appIntlTelInput);
  }
}

Usage inside a form

 <intl-tel-input formControlName="Mobile" ></intl-tel-input>

Hope this will solve your problem. It can validate any international mobile number as you want.

---

Related Topics