DEV Community

vidvatek
vidvatek

Posted on • Originally published at vidvatek.com

10 Digit Mobile Number Validation in Angular 17

Hey there! Ever wondered how to effortlessly validate 10-digit mobile numbers in Angular 17? In this guide, I'll walk you through the simple steps to ensure data accuracy and enhance your user interactions.

Let's dive into the world of Angular 17 and make mobile number validation a breeze.

Also, I'll give you information about angular 17 mobile number validation using regular expression and how to validate 10 digit phone numbers in angular 16/17.

Here's a step-by-step guide with code snippets on how to implement 10-digit mobile number validation in Angular 17:

Step 1: Set Up Your Angular 17 Project

Begin by creating a new Angular 17 project using the Angular CLI.

# Create a new Angular project
ng new angular-mobile-validation

# Navigate to the project folder
cd angular-mobile-validation
Enter fullscreen mode Exit fullscreen mode

Step 2: Create a Mobile Number Validation Component

Build a new Angular component specifically for mobile number validation.

# Generate a new component for mobile number validation
ng generate component mobile-validation
Enter fullscreen mode Exit fullscreen mode

Step 3: Implement the Validation Logic

Update the mobile-validation.component.html file with the input field and validation logic:

<div class="container">
    <h1>Angular phone number validation using regex - Vidvatek</h1>

    <form [formGroup]="form" (ngSubmit)="submit()">

        <div class="form-group">
            <label for="mobileNumber">Mobile Number</label>
            <input 
                formControlName="mobileNumber"
                id="mobileNumber" 
                type="text" 
                class="form-control">
            <div *ngIf="f.mobileNumber.touched && f.mobileNumber.invalid" class="alert alert-danger">
                <div *ngIf="f.mobileNumber.errors.required">Mobile Number is required.</div>
                <div *ngIf="f.mobileNumber.errors.pattern">Please enter a valid 10-digit mobile number.</div>
            </div>
        </div>

        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>
Enter fullscreen mode Exit fullscreen mode

Update the mobile-validation.component.ts file with the logic to handle user input:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-mobile-validation',
  templateUrl: './mobile-validation.component.html',
  styleUrls: ['./mobile-validation.component.css']
})
export class MobileValidationComponent {
  form: FormGroup = new FormGroup({});

  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      mobileNumber: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]]
    })
  }

  get f(){
    return this.form.controls;
  }

  submit(){
    console.log(this.form.value);
  }

}
Enter fullscreen mode Exit fullscreen mode

Step 4: Display Validation Messages

Update the styles in the mobile-validation.component.css file for better presentation:

/* mobile-validation.component.css */

div {
  margin-bottom: 15px;
}

input {
  padding: 8px;
  width: 200px;
}

div > div {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Test and Refine

Test your Angular app by serving it:

ng serve
Enter fullscreen mode Exit fullscreen mode

Congratulations! You've successfully implemented 10-digit mobile number validation in Angular 17.

Conclusion

In conclusion, implementing 10-digit mobile number validation in Angular 17 is a straightforward process that enhances user data accuracy.

With clear validation messages and a user-friendly interface, this guide empowers you to create a seamless experience for your application users.

Happy coding!

Top comments (1)

Collapse
 
generator_garimu profile image
Garimu Alonso

Thanks, for the article.

Also you can use "


javascript" 
before starting your code to make it more readable.
Enter fullscreen mode Exit fullscreen mode