悩んでいる男の子Angularで整数チェックを実装する方法が分からないんだよね。。
こんな悩みを解決します。
- 本記事の内容
- Angularで整数チェックを実装する方法
- 本記事の執筆者
プロフィール
- 長身ガリガリ自称イケメン(1993/4/1生)
- 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
- 副業(物販)5か月目で月利30万円⇒脱サラ
- 物販、システム開発、アフィリエイト、投資を細々とやっています。
- 物販は彼女と楽しみながらやってます！
今回は、Angularで整数チェックを実装する方法を解説します。
いずみんすぐ終わるので、最後まで読んでみてください！
目次
まずは準備をする
コンポーネント作成
ng g c component/integer新規コンポーネントを作成します。
カスタムバリデーション作成
今回は「custom-validator.ts」を作成しました。
整数チェックの実装
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の勉強をしました！
非常に分かりやすいので是非！
コメント