『自由力』を身に付けるサイト「リバトレ」も見てね!!

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

悩んでいる男の子

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

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

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

今回は、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の勉強をしました!
非常に分かりやすいので是非!

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

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

シェアするんやで!

~ リバトレ ~

お金や副業に関する情報を発信しているよ!

この記事を書いた人

いずみんのアバター いずみん 自由力発信おじ

【自由力発信】うさんくさ笑 | 副業物販で5ヶ月目に月利30万円達成⇨脱サラ予定 | 物販(アパレルせどり)・アフィリエイト・投資で自由になるための情報を発信中?笑 | 元エンジニア | 保有資格約20個

関連記事

コメント

コメントする

目次
閉じる