Angular 12 URL Validation using Regular Expression

Angular 12 URL validation using regular expression; In this tutorial, you will learn how to validate url in angular 12 applications.

Angular 12 URL Validation using Regular Expression

See the following steps and knowledge of angular URL pattern validation. This very basic and easy example will appropriately work well with almost every angular version, be it 8,9,10,11, or 12:

• Step 1 – Create New Angular App
• Step 2 – Install Bootstrap Library
• Step 3 – Add Code on App.Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On app.Component ts File
• Step 6 – Start the Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Bootstrap Library

In this step, execute the following command on your terminal to install bootstrap library in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

Then you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
...

Step 3 – Add Code on App.Module.ts File

In this step, visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Step 4 – Add Code on View File

In this step, create simple form in angular 11/12 app. So, visit src/app/ and app.component.html and update the following code into it:

<div class="container mt-5">

  <h2>Angular Pattern URL Validation Example - Tutsmake.com</h2>

  <form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="form-group">
      <label>Enter URL</label>
      <input type="text" formControlName="url" class="form-control mb-2">

      <div *ngIf="m.url.touched && m.url.invalid" class="alert alert-danger">
        <div *ngIf="m.url.errors?.required">Please provide url</div>
        <div *ngIf="m.url.errors?.pattern">Please provide valid url</div>
      </div>
    </div>

    <div class="d-grid mt-3">
      <button class="btn btn-dark" [disabled]="!myForm.valid" type="submit">Store</button>
    </div>
  </form>
</div>

Step 5 – Add Code On app.Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  public myForm: FormGroup;
  
  constructor(private formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({
      url: ['', [Validators.required, Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')]]
    })
  }
    
  get m(){
    return this.myForm.controls;
  }
   
  onSubmit(){
    console.log(this.myForm.value);
  }
  
}

Step 6 – Start the Angular App

In this step, execute the following command on terminal to start angular phone number validation app:

ng serve

Recommended Angular Tutorials