【初心者向け】Angular Reactive Forms でカスタムコントロールを作成して独自の検証ロジックを実装する方法

Angular Reactive Forms で無効なコントロールを見つける方法

このチュートリアルでは、Angular v2 以降の Reactive Forms で無効なコントロールを見つけるためのさまざまな方法を紹介します。

form.invalid プロパティを使用する

最も簡単な方法は、form.invalid プロパティを使用することです。これは、フォーム全体が有効かどうかを示すブール値です。

<form [formGroup]="form">
  <button type="submit" [disabled]="form.invalid">送信</button>
</form>

form.errors プロパティは、フォーム全体のエラーオブジェクトです。このオブジェクトを使用して、特定の種類のエラーをチェックできます。

if (form.errors.required) {
  // 少なくとも1つのコントロールが必須です
}

form.get() メソッドを使用して、特定のコントロールを取得できます。その後、そのコントロールの invalid プロパティまたは errors プロパティをチェックできます。

const nameControl = form.get('name');

if (nameControl.invalid) {
  // 名前コントロールが無効です
}

if (nameControl.errors.required) {
  // 名前コントロールは必須です
}

for (const control of form.controls) {
  if (control.invalid) {
    // 無効なコントロールが見つかりました
  }
}

カスタムバリデーターを使用して、特定の条件に基づいてコントロールを検証できます。

export class MyValidator {
  static validate(control: AbstractControl): ValidationErrors | null {
    if (control.value === 'invalid') {
      return { invalid: true };
    }
    return null;
  }
}

// ...

<form [formGroup]="form">
  <input type="text" formControlName="name" [validators]="[MyValidator.validate]">
</form>

Angular Reactive Forms で無効なコントロールを見つける方法はたくさんあります。上記の例は、いくつかの一般的な方法を示しています。

具体的な方法は、要件とフォームの複雑さに応じて異なります。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  form: FormGroup;

  constructor() { }

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    // フォームが無効な場合は何もしない
    if (this.form.invalid) {
      return;
    }

    // フォームデータを送信する
    console.log(this.form.value);
  }

}

テンプレート

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">名前</label>
    <input type="text" id="name" formControlName="name" required>
  </div>
  <div>
    <label for="email">メールアドレス</label>
    <input type="email" id="email" formControlName="email" required>
  </div>
  <div>
    <label for="password">パスワード</label>
    <input type="password" id="password" formControlName="password" required>
  </div>
  <button type="submit">送信</button>
</form>

説明

• form プロパティは、フォーム全体の FormGroup インスタンスです。
• name、email、password プロパティは、各フォームコントロールを表す FormControl インスタンスです。
• Validators.required バリデーターは、コントロールが必須であることを指定します。
• onSubmit() メソッドは、フォームが送信されたときに呼び出されます。このメソッドは、フォームが無効かどうかをチェックし、有効な場合はフォームデータを送信します。

Angular Reactive Forms で無効なコントロールを見つける他の方法

form.statusChanges サブスクライブを使用して、フォームの状態の変化を監視できます。

this.form.statusChanges.subscribe((status) => {
  if (status === 'INVALID') {
    // フォームが無効になりました
  }
});

this.form.valueChanges.subscribe((value) => {
  // フォーム値が変更されました
  // 無効なコントロールをチェックする
});

カスタムコントロールを作成して、独自の検証ロジックを実装できます。

export class MyControl extends AbstractControl {
  constructor(
    private readonly _value: string,
  ) {
    super();
  }

  override get value(): string {
    return this._value;
  }

  override validate(): ValidationErrors | null {
    // 独自の検証ロジックを実装する
    if (this._value === 'invalid') {
      return { invalid: true };
    }
    return null;
  }
}

テンプレート構文を使用して、無効なコントロールに応じてスタイルやクラスを変更できます。

<input type="text" formControlName="name" class="form-control" [ngClass]="{'is-invalid': nameControl.invalid}">