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...
Do you like below Tutorials ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example