In Reactive form Mobile & URL Validation in Angular 13

In this article, we learn how to add mobile and URL validation using reactive forms angular. In this article, we create examples set by step. First, we need to install Angular CLI. To install CLI run the below command.


npm install -g @angular/cli

After installing the Angular CLI let’s create the first project for creating reactive form validation.


ng new form-validation

it will generate a bunch of files with project “form-validation”. now we need to go into the folder and then run the code.


cd form-validation

Now Import the Reactive Forms Module in the app.module.ts file displayed below code.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

After importing the reactive forms module we need to use it in our component for that import FormBuilder, FormGroup, Validators from ‘@angular/forms’, then define the form using the FormGroup display in the below component.


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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({
      mobile: [
        '',
        [Validators.required, Validators.pattern('^((\\+91-?)|0)?[0-9]{10}$')],
      ],
      url: [
        '',
        [
          Validators.required,
          Validators.pattern(
            '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?'
          ),
        ],
      ],
    });
  }

  get m() {
    return this.myForm.controls;
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

after adding the above code we need to add the below HTML code.


<div class="container mt-5">
  <h2>Angular Mobile Number & URL Validation Example</h2>
  <form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="form-group">
      <label>Mobile number: </label>
      <input type="text" formControlName="mobile" class="form-control mb-2" />
      <div
        *ngIf="m.mobile.touched && m.mobile.invalid"
        class="alert alert-danger"
      >
        <div *ngIf="m.mobile.errors?.required">Please enter mobile number</div>
        <div *ngIf="m.mobile.errors?.pattern">
          Mobile number is not 10 digit
        </div>
      </div>
    </div>

    <div class="form-group">
      <label>Enter URL</label>
      <input type="text" formControlName="url" class="form-control mb-2" />
      <div *ngIf="m.url.touched && m.url.invalid" class="alert alert-danger">
        <div *ngIf="m.url.errors?.required">Please provide url</div>
        <div *ngIf="m.url.errors?.pattern">Please provide valid url</div>
      </div>
    </div>

    <div class="d-grid mt-3">
      <button class="btn btn-dark" [disabled]="!myForm.valid" type="submit">
        Store
      </button>
    </div>
  </form>
</div>

Output

Below is the full embeded code for reactive form validation in angular. you can easily used in your application.
Example

Spread the love