IgxInput 数値の範囲制限

Ignite UI for Angular 11.1.4バージョン時点での情報に基づいています。

IgxInput では、数値入力時の範囲制限を行う機能はご用意がございません。値変更時に発生するイベントをハンドルし、範囲を超える値であれば値の補正を行うなどの対応が必要となります。

下記例では、igxMask ディレクティブの onValueChange イベントを組み合わせて、数値の範囲制限（値の補正）を行っています。

<igx-input-group>
  <label igxLabel>数値の範囲制限</label>
  <input igxInput type="text" 
  [(ngModel)]="inputValue"
  [igxMask]="'##'" placeholder="__" 
   (onValueChange) = "onValueChange($event)"/>
</igx-input-group>

  onValueChange(args: IMaskEventArgs) {
    const numericValue = +args.rawValue;
    if (numericValue > 10) {
      this.inputValue = 10;
    } else if (numericValue < 0) {
      this.inputValue = 0;
    }
  }

実装サンプル

github-5xyah7-3wswbf – StackBlitz