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

ng g c component/integer

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

}

<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>

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 };
  }

}