Angularの入力フィールドには数値のみを入力する方法

2024-02-10 06:49 Angular 入力フィールド 数値のみ
  1. テンプレート駆動フォーム: テンプレート駆動フォームを使用している場合、input要素にtype属性を指定することで数値のみの入力を制限できます。例えば、type="number"を指定すると、ユーザーは数値以外の文字を入力できなくなります。
<input type="number" [(ngModel)]="myNumber">
  1. リアクティブフォーム: リアクティブフォームを使用している場合は、フォームコントロールにバリデータを追加することで数値のみの入力を制限できます。以下は、数値のみを受け入れるバリデータの例です。
import { FormControl, Validators } from '@angular/forms';
// ...
myNumberControl = new FormControl('', [Validators.pattern('^[0-9]*$')]);
// ...
  1. ディレクティブ: カスタムディレクティブを作成して、数値のみの入力を制限することもできます。以下は、数値のみを受け入れるディレクティブの例です。
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[numbersOnly]'
})
export class NumbersOnlyDirective {
  constructor(private el: ElementRef) { }
  @HostListener('input', ['$event']) onInputChange(event) {
    const initialValue = this.el.nativeElement.value;
    this.el.nativeElement.value = initialValue.replace(/[^0-9]*/g, '');
    if (initialValue !== this.el.nativeElement.value) {
      event.stopPropagation();
    }
  }
}

上記のディレクティブを使用するには、input要素にnumbersOnlyディレクティブを追加します。

<input type="text" numbersOnly>

これらの方法を使用すると、Angularの入力フィールドに数値のみを入力することができます。適宜、自身のプロジェクトに合わせて選択してください。