URL Pattern Validation in Angular

Hello Devs, 

In this tutorial, we will learn URL Pattern Validation in Angular

In this section, we will use url validation pattern in angular 6, angular 7, angular 8 and angular 9 application.

Follow this step by step guide below. 

Solution:

const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';

  

this.form = fb.group({

  url: ['', [Validators.required, Validators.pattern(reg)]]

})

Example:

src/app/app.component.html

<div class="container">

    <h1>URL Validation in Angular - rathorji.in</h1>

        

    <form [formGroup]="form" (ngSubmit)="submit()">

           

        <div class="form-group">

            <label for="url">URL</label>

            <input 

                formControlName="url"

                id="url" 

                type="text" 

                class="form-control">

            <div *ngIf="f.url.touched && f.url.invalid" class="alert alert-danger">

                <div *ngIf="f.url.errors.required">URL is required.</div>

                <div *ngIf="f.url.errors.pattern">Please enter valid url.</div>

            </div>

        </div>

       

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

    </form>

</div>

src/app/app.component.ts

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

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

    

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  form: FormGroup = new FormGroup({});

   

  constructor(private fb: FormBuilder) {

    const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';

    this.form = fb.group({

      url: ['', [Validators.required, Validators.pattern(reg)]]

    })

  }

    

  get f(){

    return this.form.controls;

  }

   

  submit(){

    console.log(this.form.value);

  }

   

}

May this example help you.