Angular 12: Валидация URL-адреса с использованием регулярного выражения

В этом руководстве вы узнаете, как проверить URL-адрес в приложениях Angular 12. Ознакомьтесь со следующими шагами и знаниями о проверке URL. Этот очень простой пример будет хорошо работать практически с любой Angular версией, будь то 8,9,10,11 или 12: 

• Шаг 1 - Создадим новое приложение Angular
• Шаг 2 - Установим библиотеку Bootstrap 
• Шаг 3 - Добавим код в файл App.Module.ts
• Шаг 4 - Добавим код в файл вида (View)
• Шаг 5 - Добавим код в файл app.Component ts
• Шаг 6 - Запустим приложение Angular

Шаг 1 - Создайте новое приложение Angular

Прежде всего, откройте свой терминал и выполните в нем следующую команду, чтобы установить приложение angular: 

ng new my-new-app

Шаг 2 - Установите библиотеку Bootstrap

На этом шаге выполните следующую команду на своем терминале, чтобы установить библиотеку Bootstrap в приложении Angular 11. Итак, вы можете установить пакеты, выполнив следующие команды на терминале:

npm install --save bootstrap

Затем вам нужно добавить приведенный ниже код в файл angular.json: 

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

Шаг 3 - Добавьте код в файл App.Module.ts 

На этом этапе перейдите в каталог src/app и откройте файл app.module.ts. Затем добавьте в файл app.module.ts следующие строки:

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

Шаг 4 - Добавьте код в файл вида

На этом этапе создайте простую форму в приложении Angular 11/12. Итак, перейдите в каталог src/app/ в файл app.component.html и обновите в нем следующий код:

<div class="container mt-5">
 
  <h2>Angular Pattern URL Validation Example - MakeCodes.ru</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>

Шаг 5 - Добавьте код в файл app.Component ts 

Перейдите в каталог src/app и откройте файл app.component.ts. Затем добавьте следующий код в файл component.ts: 

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);
  }
   
}

Шаг 6 - Запустите приложение Angular 

На этом шаге выполните следующую команду в терминале, чтобы запустить приложение проверки номера телефона angular: 

ng serve