日々更新中です!

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

  • URLをコピーしました!
悩んでいる男の子

Angularで整数チェックを実装する方法が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • Angularで整数チェックを実装する方法
  • 本記事の執筆者
プロフィール
いずみん(どこの写真だよ)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 物販月利50万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
  • 物販は彼女と楽しみながらやっています!

今回は、Angularで整数チェックを実装する方法を解説します。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

目次

まずは準備をする

コンポーネント作成

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() {
  }

}

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>

続いて、「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 };
  }

}

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

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

こんな感じです。

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

正規表現を変えるだけで様々なチェックが可能になります。

チェックパターン 正規表現
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+)?$/

まとめ

今回は、Angularで整数チェックを実装する方法を解説しました。

意外と簡単でしたね。

ではまた!

  • おすすめ本はこちら!
いずみん

僕は↑の本でAngularの勉強をしました!
非常に分かりやすいのでおすすめです!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

いずみんのアバター いずみん 自由大好きおじ

自由大好きおじ | 物販月利50万達成⇨脱サラ | 物販(アパレルせどり)・アフィリエイト・プログラミング・投資に関する情報を発信中 | 元エンジニア | 保有資格約20個

コメント

コメントする

目次
閉じる