Angular form validation to validate the phone number
Solution 1
You can allow for:
- 9999 9999
- +61 2 9999 9999
- (02) 9999 9999
Validators.pattern('[- +()0-9]+')
Solution 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
Solution 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
San Jaisy
Updated on July 05, 2022Comments
-
San Jaisy almost 2 years
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); } }