igxMask ディレクティブによる入力桁数の制限

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

igxMask ディレクティブを利用することで、入力コントロールに対して入力できる桁数の制限をかけることができます。

文字列の桁数制限・・・igxMask に入力可能桁数分の ‘?’ を指定します。

<igx-input-group>
  <label igxLabel>文字列の桁数制限</label>
  <input igxInput type="text" [igxMask]="'??????'" placeholder="______" />
</igx-input-group>

数値の桁数制限・・・igxMask に入力可能桁数分の ‘#’ を指定します。

<igx-input-group>
  <label igxLabel>数値の桁数制限</label>
  <input igxInput type="text" [igxMask]="'######'" placeholder="______" />
</igx-input-group>

実装サンプル

github-5xyah7-3wswbf – StackBlitz