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
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