【Angular】ディレクティブでバリデータを設定する方法！

Q: 複数の独自バリデータを1つの項目に適用できますか？

Angularは複数のバリデータを同時に適用できます。 ディレクティブ側でmulti: trueを設定すれば、他のバリデータと干渉せずに機能します。

2025年5月24日

いずみ

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

Angularのディレクティブでバリデータを設定する方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。

「Angularのディレクティブでバリデータを設定する方法を知りたい」とお考えではありませんか？

Angularのディレクティブは様々な使い方ができますが、ディレクティブでバリデータを設定することも可能です。

いずみ

複雑なバリデータや特定の項目のみにバリデータを付与したい場合に使えます。

まあ、わざわざディレクティブを使う必要もないですが、知っておくと便利です。

本記事を読めば、Angularのディレクティブでバリデータを設定する方法について分かるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴7年（2018年〜）
ブランドせどりで月利50万円⇨脱サラ
投資（仮想通貨・FX）歴7年（2018年〜）
X（旧Twitter）フォロワー約1,900人
運営者情報はこちら

いずみです

【Angular】ディレクティブでバリデータを設定する方法

早速ですが、Angularのディレクティブでバリデータを設定する方法を解説します。

いずみ

今回は、特定の文字列「test」を禁止するバリデーションをディレクティブにしてみます。

STEP

バリデータのディレクティブ作成

import { Directive } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';

@Directive({
  selector: '[appForbiddenWord]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: ForbiddenWordDirective,
      multi: true,
    }
  ]
})
export class ForbiddenWordDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const forbidden = /test/i.test(control.value);
    return forbidden ? { forbiddenWord: { value: control.value } } : null;
  }
}

入力値に「test」という単語が含まれていた場合に、バリデーションエラーを返すディレクティブを作成します。

STEP

テンプレート設定

<form [formGroup]="form">
  <label>
    入力欄：
    <input formControlName="name" appForbiddenWord />
  </label>
  <div *ngIf="form.controls['name'].errors?.forbiddenWord">
    「test」という単語は使用できません。
  </div>
</form>

STEP

フォーム定義

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['']
    });
  }
}

いずみ

これでおしまい。

ディレクティブは結構便利なので個人的に重宝してます（笑）