Angular Validation for URL Example

Angular Validation for URL Example

In this post we will give you information about Angular Validation for URL Example. Hear we will give you detail about Angular Validation for URL ExampleAnd how to use it also give you demo for it if it is necessary.

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 >

<h1>URL Validation in Angular - ItSolutionStuff.com</h1>

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

<div >

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

<input

formControlName="url"

id="url"

type="text"

>

<div *ngIf="f.url.touched && f.url.invalid" >

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

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

</div>

</div>

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

</form>

</div>

src/app/app.component.ts

Also see:10 Digit Mobile Number Validation in Angular

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…

Hope this code and post will helped you for implement Angular Validation for URL Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

71  +    =  72

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US