Angular form validation to validate the phone number

Question

I am trying to validate the phone number using regex expression in angular

HTML content

<div class="form-group row">
                <input type="text" class="form-control" appPhoneMask placeholder="Mobile Number" autocomplete="off"
                    [ngClass]="{ 'is-invalid': (f.inputCountryCode.errors && mobileNumberform.submitted) }"
                    formControlName="inputCountryCode">
                <div *ngIf="(f.inputCountryCode.invalid ) || (f.inputCountryCode.invalid && (f.inputCountryCode.dirty || f.inputCountryCode.touched))"
                    class="invalid-feedback">
                    <div *ngIf="f.inputCountryCode.errors.required">This field is required.</div>
                    <div *ngIf="f.inputCountryCode.errors.pattern">Invalid phone number.</div>
                </div>
            </div>

TS code

 this.$form = this.$builder.group({
      selectCountryCode: [null, Validators.required],
      inputCountryCode: [null, [Validators.required, Validators.pattern("[0-9 ]{12}")]]
    });

The validation pattern should allow numeric number with space because I am using the phone number masking which add space after 3 digits.

The pattern is not working keep getting phone numner validation false

Angular 4 Mobile number validation

Regex for field that allows numbers and spaces

Masking directive

export class PhoneMaskDirective {

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.onInputChange(event.target.value, true);
  }


  onInputChange(event, backspace) {
    let newVal = event.replace(/\D/g, '');
    if (backspace && newVal.length <= 6) {
      newVal = newVal.substring(0, newVal.length - 1);
    }
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 3) {
      newVal = newVal.replace(/^(\d{0,3})/, '$1');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '$1 $2');
    } else if (newVal.length <= 9) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '$1 $2 $3');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '$1 $2 $3');
    }
    this.ngControl.valueAccessor.writeValue(newVal);
  }
}

Answer 1

You can allow for:

• 9999 9999
• +61 2 9999 9999
• (02) 9999 9999

Validators.pattern('[- +()0-9]+')

Answer 2

Your regex expression requires 12 symbols of [0-9 ], while you input contains only 11.

Update your regexp for inputCountryCode to "[0-9 ]{11}":

 this.$form = this.$builder.group({
      selectCountryCode: [null, Validators.required],
      inputCountryCode: [null, [Validators.required, Validators.pattern("[0-9 ]{11}")]]
    });

Or you can add a space after phone number in input, so it will be 12 symbols.

But I would prefer to use more specific regexp for phone number like '[0-9]{3} [0-9]{3} [0-9]{3}', because with your pattern phone number 11 1111 111 or 111111 are valid numbers

Answer 3

Just another idea, similarly, you can actually force entered value to keep phone format, this is an example of US format 123-123-1234. First we limit users input on numbers only :

//Number formatting in your .ts file
  public numbersOnlyValidator(event: any) {
    const pattern = /^[0-9\-]*$/;
    if (!pattern.test(event.target.value)) {
      event.target.value = event.target.value.replace(/[^0-9\-]/g, "");
    }
  }

and then, we add phone field with directive phoneMask - in html :

 <div class="form-group row">
           <input 
             type="text" 
             placeholder="phone number xxx-xxx-xxxx" 
             class="form-control" 
             id="phone" 
             name="phone" 
             maxlength="12"
            [(ngModel)]="phone" 
            phoneMask
            [ngClass]="{ 'is-invalid': phone.touched || form.submitted && phone.invalid }"
            #phone="ngModel" 
            phoneMask 
            (input)="numbersOnlyValidator($event)" />

            <div *ngIf="(phone.touched || form.submitted) &&
                phone.invalid" class="invalid-feedback">
                  <div *ngIf="phone.errors">
                    Please enter valid phone number.
                  </div>
                </div>
 </div>

Here you filter numbers only (input)="numbersOnlyValidator($event)"

Here is Directive phoneMask used in html where you actually format input into dashed pattern NNN-NNN-NNNN :

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[phoneMask]'
})
export class PhoneMasksDirective {

  constructor() { }

  @HostListener('input', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    let trimmed = input.value.replace(/\s+/g, '');

    if (trimmed.length > 12) {
      trimmed = trimmed.substr(0, 12);
    }
 
    trimmed = trimmed.replace(/-/g,'');

    let numbers = [];
    numbers.push(trimmed.substr(0,3));
    if(trimmed.substr(3,3)!=="")
    numbers.push(trimmed.substr(3,3));
    if(trimmed.substr(6,4)!="")
    numbers.push(trimmed.substr(6,4));
    input.value = numbers.join('-');

  }

}

DEMO stackblitz

Answer 4

[- +()0-9]{10,12} // basic validation with limited to 10 to 12 numbers range

You can you one of these options

With .ts file

Validators.pattern('[- +()0-9]{10,12}')

With HTML file

<input type="text" formControlName="MobileNumber" required pattern="[- +()0-9]{10,12}">

Answer 5

You can use

Validators.pattern("(09)[0-9 ]{9}")

example: 09112223333

conditions: number must be start with '09', should be numerical and fixed length (in this sample 11 digit)

Answer 6

I use the library "phone".

npm install phone

To import:

import { phone } from 'phone';

To use:

let a = phone('(817) 569-8900', {country: 'USA'});
console.log(a)

Which will give a result like this:

{isValid: true, phoneNumber: '+18175698900', countryIso2: 'US', countryIso3: 'USA', countryCode: '+1'}

Answer 7

You can use

Validators.pattern('^(?!0+$)(?:\(?\+\d{1,3}\)?[- ]?|0)?\d{10}$')

Answer 8

The issue was with

Validators.pattern("[0-9 ]{12}")

Replace it with

Validators.pattern(new RegExp("[0-9 ]{12}"))

Change code

this.$form = this.$builder.group({
      selectCountryCode: [null, Validators.required],
      inputCountryCode: [null, [Validators.required, Validators.pattern(new RegExp("[0-9 ]{12}"))]]
    });