Throughout this tutorial, you will find out how to validate a URL in the Angular app using regular expressions. URL pattern validation will be explained in this tutorial using the regex.
To validate a URL, we will create a simple form with the help of the reactive forms. Create a simple input field that will accept the only URL as a value, and check if the provided value is a URL.
If it finds out other than the URL, it will display an error message to the user.
At the end of this tutorial you will have the complete understanding of angular input URL validation. The steps given in this tutorial may also help you create similar feature in the Angular 13, 12 9,10,11…
How to Validate URL in Angular 14 using Regular Expression
- Step 1: Set Up Angular Environment
- Step 2: Create Angular App
- Step 3: Implement URL Validation
- Step 4: Create Reactive Form
- Step 5: Run Development Server
Install Angular CLI
Ensure that you have installed the node runtime environment and npm package manager on your development system.
After that, type and execute the given command to install the Angular CLI.
npm install -g @angular/cli
If Angular CLI is already configured, then skip this step.
Download Angular Project
Next, you have to install a new angular project, you require to type and execute the following command.
ng new ng-demo
Get into the project folder.
cd ng-demo
Disable Strict Angular TypeStrict Errors
The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false
, "noImplicitReturns": false
and "strictTemplates": false
inside the compilerOptions and angularCompilerOptions in tsconfig.json file.
In order to accept URL from the user, create a form with input text type value for that get into the app.module.ts file and import ReactiveFormsModule and FormsModule from ‘@angular/forms’.
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@NgModule({
declarations: [],
imports: [
ReactiveFormsModule,
FormsModule
],
providers: [],
bootstrap: []
})
export class AppModule { }
Implement URL Validation
We need to import Validators, FormBuilder and FormGroup these services will help create the form and validate the form using the pattern validator.
Add, code in app.component.ts file.
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public fg: FormGroup;
constructor(private fb: FormBuilder) {
this.fg = fb.group({
url: ['', [Validators.required, Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')]]
})
}
get getUrl(){
return this.fg.controls;
}
onFormSubmit(){
alert(this.fg.value);
}
}
Create Reactive Form
The programming logic has been gone into the typescript template, and it’s time to get into the app.component.html file.
In this file, you have to create a form using the formGroup directive, and by using the getUrl getter method, we will access the validation, validate the URL input and show the error message to the user.
<form [formGroup]="fg" (ngSubmit)="onFormSubmit()" novalidate>
<div class="form-group mb-3">
<label>URL</label>
<input type="text" formControlName="url" class="form-control mb-3">
<div *ngIf="getUrl.url.touched && getUrl.url.invalid" class="alert alert-danger">
<div *ngIf="getUrl.url.errors?.required">Value is required</div>
<div *ngIf="getUrl.url.errors?.pattern">Only URL is allowed</div>
</div>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!fg.valid">Submit</button>
</form>
Run Development Server
Ultimately, type command on the command prompt, hit enter and invoke the app’s development server.
ng serve
Open browser, type the provided url and hit enter to run the app.
http://localhost:4200
Summary
Regular expressions are especially valuable for specifying filters. Regular expressions comprise a group of characters that specify a pattern of text to be matched.
In this small tutorial, we looked upon Regex expression and learned how to validate a URL in angular with the Validators.pattern() method.