ngx-mask

ngx-mask copied to clipboard

Current code: <input class="form-control" type="text" placeholder="Phone number" name="phone" #phone="ngModel" [dropSpecialCharacters]="false" [clearIfNotMatch]="true" mask="+00 000 000 000" placeHolderCharacter="_" [showMaskTyped]="true">

I want to achieve bahaviour that mask will be enabled after clicking input - currently if the flag is true I see mask not placeholder.

My solution of this is: <input class="form-control" type="text" placeholder="Phone number" name="phone" #phone="ngModel" [dropSpecialCharacters]="false" [clearIfNotMatch]="true" mask="+00 000 000 000" placeHolderCharacter="_" [showMaskTyped]="true" [showMaskTyped]="phone.control.touched" (click)="phone.control.markAsTouched()">

Just added [showMaskTyped]="phone.control.touched" (click)="phone.control.markAsTouched()"

This solution is almost good, but in this case the caret position is setting on the end (after first clicking). I'd prefer to has this handled by library - possible?

Any update on this issue ?

This is extremely important feature, because in some designs you don't have separate labels for input fields and their designation is specified by the placeholder (which is not getting displayed due to this issue).

@mhubertm @slavafomin @sumegha26 Thanks for your using Ngx-Mask. Please update to latest version. It example, all work as expected - https://stackblitz.com/edit/angular-ky21t9?file=src%2Fmain.ts