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:

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

 

Build a new Angular component specifically for mobile number validation.

# Generate a new component for mobile number validation
ng generate component mobile-validation

 

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>

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);
  }
   
}

 

 

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;
}

 

Test your Angular app by serving it:

ng serve

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

 

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!

 

---

You might also like:

• Read Also: How to Create Autocomplete Search in Vue JS
• Read Also: How to use Unique Validation on Update in Laravel 10
• Read Also: Laravel 10 Password and Confirm Password Validation
• Read Also: 10 Reasons Why Laravel Is the Best PHP Framework 2023

---