Angular 8でのフォームコントロールのURL検証方法

テンプレート駆動フォームの場合:

テンプレートファイル (example.component.html) 内に以下のようなコードを追加します。

<form #myForm="ngForm">
  <input type="url" name="myUrl" [(ngModel)]="urlValue" #myUrl="ngModel" required pattern="https?://.+">
  <div *ngIf="myUrl.errors && (myUrl.dirty || myUrl.touched)">
    <div *ngIf="myUrl.errors.required">
      URLは必須です。
    </div>
    <div *ngIf="myUrl.errors.pattern">
      正しいURLの形式ではありません。
    </div>
  </div>
</form>

コンポーネントファイル (example.component.ts) 内に以下のようなコードを追加します。

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  urlValue: string;
}

リアクティブフォームの場合:

コンポーネントファイル (example.component.ts) 内に以下のようなコードを追加します。

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  urlFormControl: FormControl;
  ngOnInit() {
    this.urlFormControl = new FormControl('', [Validators.required, Validators.pattern('https?://.+')]);
  }
}

テンプレートファイル (example.component.html) 内に以下のようなコードを追加します。

<form [formGroup]="myForm">
  <input type="url" formControlName="myUrl">
  <div *ngIf="urlFormControl.errors && (urlFormControl.dirty || urlFormControl.touched)">
    <div *ngIf="urlFormControl.errors.required">
      URLは必須です。
    </div>
    <div *ngIf="urlFormControl.errors.pattern">
      正しいURLの形式ではありません。
    </div>
  </div>
</form>

これらの方法を使用すると、Angular 8でフォームコントロールのURL検証を行うことができます。適切なエラーメッセージが表示され、ユーザーが正しい形式のURLを入力するよう促されます。必要に応じて、パターン属性をカスタマイズすることもできます。