URL Pattern Validation in Angular

This example is focused on url validation regex angular. you will learn angular validation for url. you will learn pattern for url validation in angular. This tutorial will give you simple example of angular validator pattern url example. You just need to some step to done url validation in angular.

You can use url validation pattern in angular 6, angular 7, angular 8 and angular 9 application.

I will give you full example of how to implement validation for url regex pattern in angular application. textbox should accept only url in angular using reactive form. you can also see bellow preview for validation.

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 - HDTuto.com</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);
  }
   
}

I hope it can help you...