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 ?
- PHP Convert Date String to Datetime Object
- Laravel Validation Different Value Example
- Jquery Redirect to URL After Specific Time Example
- User Roles and Permissions in Laravel Example
- How to Get Value of Selected Option in Vue JS?
- Laravel Change Password OLD Password Validation Example
- Vue JS Get String Length Example
- How to Active and Inactive Status in Laravel?