Site icon RemoteStack

Angular 12 Regex URL Pattern Validation Example Tutorial

remotestack

Throughout this tutorial, you will find out how to validate a URL in the Angular 12 app using regular expressions. URL pattern validation will be explained in this tutorial using the regex.

To validate a URL, we will create a simple form with the help of the reactive forms. Create a simple input field that will accept the only URL as a value, and check if the provided value is a URL.

If it finds out other than the URL, it will display an error message to the user.

At the end of this tutorial you will have the complete understanding of angular input URL validation. The steps given in this tutorial may also help you create similar feature in the Angular 12 9,10,11…

How to Validate URL in Angular using Regular Expression

Install Angular CLI

Ensure that you have installed the node runtime environment and npm package manager on your development system.

After that, type and execute the given command to install the Angular CLI.

npm install -g @angular/cli

If Angular CLI is already configured, then skip this step.

Download Angular Project

Next, you have to install a new angular project, you require to type and execute the following command.

ng new ng-demo

Get into the project folder.

cd ng-demo

In order to accept URL from the user, create a form with input text type value for that get into the app.module.ts file and import ReactiveFormsModule and FormsModule from ‘@angular/forms’.


import { ReactiveFormsModule, FormsModule } from '@angular/forms';


@NgModule({
  declarations: [],
  imports: [
    ReactiveFormsModule,
    FormsModule    
  ],
  providers: [],
  bootstrap: []
})

export class AppModule { }

Implement URL Validation

We need to import Validators, FormBuilder and FormGroup these services will help create the form and validate the form using the pattern validator.

Add, code in app.component.ts file.

import { Component } from '@angular/core';

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  public fg: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.fg = fb.group({
      url: ['', [Validators.required, Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')]]
    })
  }
    
  get getUrl(){
    return this.fg.controls;
  }
   
  onFormSubmit(){
    alert(this.fg.value);
  } 
}

Create Reactive Form

The programming logic has been gone into the typescript template, and it’s time to get into the app.component.html file.

In this file, you have to create a form using the formGroup directive, and by using the getUrl getter method, we will access the validation, validate the URL input and show the error message to the user.

<form [formGroup]="fg" (ngSubmit)="onFormSubmit()" novalidate>
  <div class="form-group mb-3">
    <label>URL</label>
    <input type="text" formControlName="url" class="form-control mb-3">

    <div *ngIf="getUrl.url.touched && getUrl.url.invalid" class="alert alert-danger">
      <div *ngIf="getUrl.url.errors?.required">Value is required</div>
      <div *ngIf="getUrl.url.errors?.pattern">Only URL is allowed</div>
    </div>
  </div>

  <button class="btn btn-primary" type="submit" [disabled]="!fg.valid">Submit</button>
</form>

Run Development Server

Ultimately, type command on the command prompt, hit enter and invoke the app’s development server.

ng serve

Open browser, type the provided url and hit enter to run the app.

http://localhost:4200

Summary

Regular expressions are especially valuable for specifying filters. Regular expressions comprise a group of characters that specify a pattern of text to be matched.

In this small tutorial, we looked upon Regex expression and learned how to validate a URL in angular with the Validators.pattern() method.

Exit mobile version