10 Digit Mobile Number Validation in Angular 17
Tags: angular, javascript, validation, mobile
Published: 2023-12-09 05:16:44

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
``` 

> 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
``` 

> 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>
```

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

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

> Step 5: Test and Refine

Test your Angular app by serving it:

```
ng serve
```

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!