IgxMask を適用すると、ユーザー入力を制御して表示される値の書式を設定出来ますが、placeholder プロパティを設定していないとマスク文字が自動的に設定されます。
<igx-input-group>
<igx-prefix>
<igx-icon>phone</igx-icon>
</igx-prefix>
<label igxLabel>Phone</label>
<input
igxInput
type="text"
title="Phone number"
[(ngModel)]="value"
[igxMask]="'###-####-####'"
/>
</igx-input-group>
この記事では IgxMask を適用した場合でも placeholder を表示させない方法についてご紹介します。
placeholder 非表示の設定
placeholder に空文字を明示的に指定することで、UI 上は placeholder を表示しないように制御が可能になります。
<igx-input-group>
<igx-prefix>
<igx-icon>phone</igx-icon>
</igx-prefix>
<label igxLabel>Phone</label>
<input
igxInput
type="text"
title="Phone number"
[(ngModel)]="value"
[igxMask]="'###-####-####'"
[placeholder]="' '"
/>
</igx-input-group>
実行結果
IgxMask を使用した場合でも placeholder を非表示とすることができました。
ダウンロード後、以下のコマンドで実行できます。
npm ci npm run dev
