【Angular】整数チェックをカスタムバリデーションで実装！ │ Traveler

Angularには数値チェックがデフォルトでないだと？！

数値チェックがないということは、もちろん整数チェックもありません。

ということで今回は、Angularで整数チェックを実装する方法を解説します！

1. まずは準備をしよう！
- 1.1. コンポーネント作成
- 1.2. カスタムバリデーション作成
2. 整数チェックの実装
3. 整数チェックの正規表現一覧
4. なぜカスタムバリデーションを使う必要があるのか？
5. ちなみにtypeがnumberの入力フォームには特殊な文字列が入力できちゃう
6. おすすめ書籍
7. まとめ

まずは準備をしよう！

コンポーネント作成

ng g c component/integer

1	ng g c component/integer

新規コンポーネントを作成します。

カスタムバリデーション作成

今回は「custom-validator.ts」を作成しました。

※僕は「appフォルダ」の直下に「validatorフォルダ」を作成し、その中にファイルを配置しました。

整数チェックの実装

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { CustomValidator } from 'src/app/validator/custom-validator';

@Component({
  selector: 'app-integer',
  templateUrl: './integer.component.html'
})
export class IntegerComponent implements OnInit {

  formGroup = new FormGroup({
    num: new FormControl(
      '',
      Validators.compose([
        CustomValidator.integer
      ])
    )
  });

  constructor() { }

  ngOnInit() {
  }

}

import { Component, OnInit } from '@angular/core';

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

import { CustomValidator } from 'src/app/validator/custom-validator';

@Component({

selector: 'app-integer',

templateUrl: './integer.component.html'

})

export class IntegerComponent implements OnInit {

formGroup = new FormGroup({

num: new FormControl(

'',

Validators.compose([

CustomValidator.integer

])

)

});

constructor() { }

ngOnInit() {

}

まずは、「integer.component.ts」を上記のように編集します。

<form [formGroup]="formGroup">
  <div>
    <input
      type="number"
      name="num"
      formControlName="num"
    >
    <div *ngIf="formGroup.controls.num.errors && (formGroup.controls.num.touched || formGroup.controls.num.dirty)">
      <span *ngIf="formGroup.controls.num.errors.integer">
        整数で入力してください。
      </span>
    </div>
  </div>
  {{ formGroup.value | json }}
</form>

<div>

<input

type="number"

name="num"

formControlName="num"

整数で入力してください。

</span>

</div>

</form>

続いて、「integer.component.html」を上記のように編集します。

import { FormControl } from '@angular/forms';

export class CustomValidator {

  /**
   * 整数チェック
   * ※0以上(符号、少数は許容しない)
   *
   * @param formControl フォームコントロール
   * @return trueの場合整数ではない、falseの場合整数である、もしくは値なし
   */
  public static integer(formControl: FormControl) {
    let isInteger = false;
    const value = String(formControl.value); // 値は文字列として扱う

    if (value !== null && value !== '' && value !== 'null') {
      isInteger = !/^([1-9]\d*|0)$/.test(value);
    }

    return { integer: isInteger };
  }

}

import { FormControl } from '@angular/forms';

export class CustomValidator {

/**

* 整数チェック

* ※0以上(符号、少数は許容しない)

* @param formControl フォームコントロール

* @return trueの場合整数ではない、falseの場合整数である、もしくは値なし

public static integer(formControl: FormControl) {

let isInteger = false;

const value = String(formControl.value); // 値は文字列として扱う

if (value !== null && value !== '' && value !== 'null') {

isInteger = !/^([1-9]\d*|0)$/.test(value);

}

return { integer: isInteger };

}

カスタムバリデーションは上記のように編集します。

※チェックにかかるのは、「値があり、かつ整数でない」場合に限ります。

整数チェック

こんな感じですね。

整数チェックの正規表現一覧

正規表現の箇所を変えるだけで、様々なチェックが可能となります。参考までに。

チェックパターン	正規表現
0以上の整数のみ	/^([1-9]\d*\|0)$/
整数 (- のみ許容)	/^[-]?([1-9]\d*\|0)$/
整数 (+, – 許容)	/^[+,-]?([1-9]\d*\|0)$/
符号なし小数	/^([1-9]\d*\|0)(\.\d+)?$/
符号あり小数 (- のみ許容)	/^[-]?([1-9]\d*\|0)(\.\d+)?$/
符号あり小数 (+, – 許容)	/^[+,-]?([1-9]\d*\|0)(\.\d+)?$/