Angular URL/Site Validation using Regular Expression and Bootstrap with Reactive Forms

Introduction

In this article, we learn steps to implement URL number validation in the angular app using the angular URL validation pattern and regular expression. Here we validate URLs in Angular with reactive forms. Reactive forms offer a model-driven path for managing form inputs whose values change over time. It explains the steps to create and update an essential form control for URL/Site validation in Angular.

Here, we create a simple dynamic form where you can use a URL validation pattern under the angular application’s component. Steps to add validation for URL using the regex pattern in the angular application. I will explain the steps to create a form with text input using the reactive forms in angular. This input field will only accept the URL.

Note. Before going through this session, please visit my previous article related to Angular applications as mentioned below.

• Angular articles

Step 1. Import Reactive Forms Module

Here we import the reactive forms module, open src/app/app.module.ts, and update the code in the file.

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

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

Step 2. Update TypeScript Template

Here, we import FormBuilder, FormGroup, and Validators from ‘@angular/forms’, then define the form using FormGroup use the URL pattern using the regex, and bind it to the submit method. Add code in src/app/app.component.ts file.

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

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

  constructor(private formBuilder: FormBuilder) {
    const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
    this.myForm = formBuilder.group({
      url: ['', [Validators.required, Validators.pattern(reg)]]
    });
  }

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

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

The URL validation logic is configured here.

constructor(private formBuilder: FormBuilder) {
    const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
    this.myForm = formBuilder.group({
      url: ['', [Validators.required, Validators.pattern(reg)]]
    })
  }

Step 3. Update HTML File

Here, we create a form using form Group and ngSubmit directives and define the URL input field using the form control name directive. Build the form using reactive form directive, and also define the required validation with url regex pattern validation. Add code in the src/app/app.component.html file.

<div class="card bg-danger text-white">
  <div class="card-body text-center">
    URL/Site Validation Using Angular
  </div>
</div>
  <div class="container mt-5">
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
      <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">Entered URL is not valid</div>
      </div>
        <div class="toast show"
        style="position:fixed;
               top: 70%;
               left: 50%;
               width:30em;
               height:10em;
               margin-top: -9em; /*set to a negative number 1/2 of your height*/
               margin-left: -15em; /*set to a negative number 1/2 of your width*/
               border: 1px solid #ccc;
               background-color: #f3f3f3;
               color: red;
               font-weight:900;
               font-size:larger;"
               *ngIf="m.url.touched && m.url.invalid">
               <div class="toast-header">
                URL/Site Validation Using Angular
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
              </div>
          <div class="toast-body" *ngIf="m.url.errors?.required">Please provide URL</div>
          <div class="toast-body" *ngIf="m.url.errors?.pattern">Entered URL is not valid</div>
        </div>
      </div>
      <div class="d-grid mt-3">
        <button class="btn btn-primary" [disabled]="!myForm.valid" type="submit">Send Request</button>
      </div>
    </form>
  </div>