Angular 2空白文字検証方法

Angular 2で空白や空文字を検証する方法

Angular 2では、フォームの入力値を検証するために、テンプレート駆動フォームまたはリアクティブフォームを使用します。どちらの場合でも、Validatorsモジュールを使用して、空白や空文字の検証を行うことができます。

テンプレート駆動フォームでの検証

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

@Component({
  selector: 'app-my-component',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="name" required>
      <div *ngIf="nameControl.invalid && nameControl.touched">
        <span *ngIf="nameControl.errors?.required">名前は必須です。</span>
        <span *ngIf="nameControl.errors?.whitespace">名前には空白を含めることはできません。</span>
      </div>
    </form>
  `,
})
export class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, this.whitespaceValidator]),
  });

  get nameControl() {
    return this.myForm.get('name');
  }

  whitespaceValidator(control: FormControl): { [key: string]: any } | null {
    if (control.value.trim() === '') {
      return { whitespace: true };
    }
    return null;
  }
}

この例では、nameフィールドが必須であることと、空白文字を含めることができないことを検証しています。whitespaceValidator関数は、入力値のトリムが空文字の場合に検証エラーを返します。

リアクティブフォームでの検証

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

@Component({
  // ...
})
expor   t class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, this.whitespaceValidator]),
  });

  // ...
}

リアクティブフォームの場合も、テンプレート駆動フォームと同様に、Validators.requiredとカスタムバリデータwhitespaceValidatorを使用しています。

重要

• カスタムバリデータwhitespaceValidatorは、入力値のトリムが空文字であることを検証します。
• Validators.requiredは、入力値が空文字であることを検証します。

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

@Component({
  selector: 'app-my-component',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="name" required>
      <div *ngIf="nameControl.invalid && nameControl.touched">
        <span *ngIf="nameControl.errors?.required">名前は必須です。</span>
        <span *ngIf="nameControl.errors?.whitespace">名前には空白を含めることはできません。</span>
      </div>
    </form>
  `,
})
export class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, this.whitespaceValidator]),
  });

  get nameControl() {
    return this.myForm.get('name');
  }

  whitespaceValidator(control: FormControl): { [key: string]: any } | null {
    if (control.value.trim() === '') {
      return { whitespace: true };
    }
    return null;
  }
}

コード解説

1. テンプレート
   

   • <form [formGroup]="myForm">：フォームの開始タグ。
   • <input type="text" formControlName="name" required>：入力フィールド。required属性は必須入力であることを示します。
   • <div *ngIf="nameControl.invalid && nameControl.touched">：エラーメッセージを表示するための条件式。
   • <span *ngIf="nameControl.errors?.required">名前は必須です。</span>：必須入力エラーメッセージ。
   • <span *ngIf="nameControl.errors?.whitespace">名前には空白を含めることはできません。</span>：空白文字エラーメッセージ。

2. コンポーネントクラス
   

   • myForm = new FormGroup({ name: new FormControl('', [Validators.required, this.whitespaceValidator]) })：フォームを定義。nameフィールドは必須入力であり、whitespaceValidator関数を使用して空白文字を検証します。
   • get nameControl() { return this.myForm.get('name'); }：nameフィールドへのアクセスを提供するゲッター。
   • whitespaceValidator(control: FormControl): { [key: string]: any } | null { ... }：カスタムバリデータ関数。入力値のトリムが空文字の場合にエラーを返します。

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

@Component({
  // ...
})
expor   t class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, this.whitespaceValidator]),
  });

  // ...
}

カスタムバリデータ関数を使用する

この方法は、前述のコード例で示した方法です。カスタムバリデータ関数を作成し、入力値のトリムが空文字であるかどうかを検証します。

Validators.minLengthを使用する

Validators.minLengthは、入力値の最小文字数を指定します。空白文字のみを含む入力値は、最小文字数に満たないため、このバリデータを使用して検証することができます。

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

@Component({
  // ...
})
expor   t class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(1)]),
  });

  // ...
}

Validators.patternを使用する

Validators.patternは、正規表現を使用して入力値を検証します。空白文字のみを含む入力値を排除する正規表現を使用することができます。

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

@Component({
  // ...
})
expor   t class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.pattern(/^\S+$/)]),
  });

  // ...
}

正規表現解説

• ^\S+$：行頭から行末まで、空白文字以外の文字が1つ以上続くことを表します。

Validators.composeを使用して複数のバリデータを組み合わせる

複数のバリデータを組み合わせる必要がある場合は、Validators.composeを使用します。

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

@Component({
  // ...
})
expor   t class MyComponent {
  myForm = new FormGroup({
    name: new FormControl('', Validators.compose([
      Validators.required,
      Validators.minLength(1),
      Validators.pattern(/^\S+$/)
    ])),
  });

  // ...
}