Angular 4 Mobile number validation

Question

I want to validate a mobile number using Angular 4 and it should not accept any characters other than numbers up to just 10 digits.

Below is my code ,

<input type="text" formControlName="mobileNo" minlength=10 maxlength=10>

It would be helpful if you included what you have tried so far! — , Sep 21 '17 at 08:45
I have put this inside the form group> 'mobileNo': [null, Validators.compose([Validators.required, Validators.pattern(mobileNoPatternMatch)])], and the pattern is const mobileNoPatternMatch = /^[0-9]{10,10}$/ — Sarvesh Redkar, Sep 21 '17 at 09:10
Fixed typos and added a tag to make the question to target to be more specific. — dance2die, Sep 22 '17 at 14:03

score 15 · Accepted Answer · answered Sep 21 '17 at 08:31

15

<input type="text" (keypress)="keyPress($event)" minlength=10 maxlength=10>


  keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;

    let inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !pattern.test(inputChar)) {
      event.preventDefault();
    }
  }

answered Sep 21 '17 at 08:31

ketan pradhan

588
2
6
13

For Angular 8, I changed `let inputChar` to `const inputChar` and `event.keyCode` to `event.key` and it worked without any warnings of deprecated code. Thanks for this. – Elaine Byene Dec 03 '19 at 04:41

score 15 · Answer 2 · answered Dec 31 '17 at 16:58

15

just add validators pattern

mobileNumber: new FormControl(null, [Validators.pattern("[0-9]{0-10}")])

and the type will be number and it will avoid accepting any character

answered Dec 31 '17 at 16:58

Khaled Ahmed

1,074
8
21

3

I tried doing this and it didn't work. The pattern [0-9]{0,10} (with a comma instead of a hyphen inside the curly braces) did the trick for me. The explanation for this pattern is: [0-9] will match any number between 0 and 9, while {0,10} states that you can input between 0 and 10 numbers (both inclusive). – ogabrielp Dec 27 '18 at 21:10
What about symbols like +, - etc. – NiallMitch14 Dec 12 '19 at 12:52

score 1 · Answer 3 · answered Dec 31 '17 at 15:40

The keyPress event worked for chrome however does not work for Firefox. In chrome key presses like backspace and arrow key events are ignored by default and does not run the function however in Firefox it runs and these do not work. I added a small line if (event.charCode !== 0)

 _keyPress(event: any) {
    if (event.charCode !== 0) {
      const pattern = /[0-9\+\-\ ]/;
      const inputChar = String.fromCharCode(event.charCode);

      if (!pattern.test(inputChar)) {
        // invalid character, prevent input
        event.preventDefault();
      }
    }
  }

score 1 · Answer 4 · answered Feb 15 '20 at 15:52

try this code...... typescript code ..

  form: FormGroup;
  pattern1 =  "^[0-9_-]{10,12}";
  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({
      phone: ['', [Validators.required, Validators.pattern(this.pattern1)]]
    })
  }

html code..

<form [formGroup]="form">
  <input type="text" formControlName="phone">
  <ng-container *ngIf="form.controls.phone.errors">
   <ng-container *ngIf="form.controls.phone.errors.pattern">
    phone no is not statndard patter
    </ng-container>
      <ng-container *ngIf="form.controls.phone.errors.required">
    phone no is required
    </ng-container>
  </ng-container>

</form>

score 0 · Answer 5 · answered Dec 17 '19 at 10:28

We can use pattern to validate mobile number in angular.

<form #userInfoForm="ngForm">
    <input type="text" name="mobile" ngModel placeholder="MOBILE NUMBER" [pattern]="'[789][0-9]{9}'">
</form>
<div class="btn-wrp">
   <button (click)="submit(userInfoForm)">Submit</button>
</div>

In typescript I check whether form is valid or not and sent error message

submit(userDetailsForm: NgForm) {
    if(userDetailsForm.invalid){
       this.toastr.error('Please enter valid details');
       return false;
    }else{
       this.router.navigate(["frontend/car/quotes"]);
    }
}

Angular 4 Mobile number validation

5 Answers5

Linked