Angular Validation for URL Example

By Hardik Savani | March 17, 2020 | Category : Angular


Now, let's see post of angular validation for url with reactive form. i explained simply about url validation in angular. if you want to see example of url pattern validation in angular 8 then you are a right place. let’s discuss about url validation regex angular. follow bellow step for pattern for 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 - ItSolutionStuff.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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: