仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

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

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

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

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

  • 本記事の内容
  • Angularで整数チェックを実装する方法
  • 本記事の執筆者
いずみん(@izumin_0401)

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

いずみん

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

プログラミングを学びたい方必見!

オンライン特化のプログラミングスクールなら「」が超おススメ!

副業としてプログラミングを学びたい方にもおすすめのスクールです!

  • 初心者が9割以上なので挫折せずに学べる!
  • 受講者に副業の仕事を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() {
  }

}

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の勉強をしました!
非常に分かりやすいのでおすすめです!

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

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

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

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

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

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