RobinHerbots / Inputmask

Input Mask plugin
https://robinherbots.github.io/Inputmask/
MIT License
6.39k stars 2.17k forks source link

How to implement this plugin with angular 7. Please mention the steps to follow. #2103

Open rakeshnayak360 opened 5 years ago

rakeshnayak360 commented 5 years ago

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

GershonR commented 5 years ago

I created a stackblitz that uses Inputmask as a directive for Angular inputs. It's intended to demo a specific bug, but you should be able to see how I have Inputmask working with Angular.

Originally, I was using the import import * as Inputmask from 'inputmask'; but this was causing the stackblitz to fail, and the workaround I found is import Inputmask from 'inputmask' so if you have any issues with importing the library try the second import statement.

Franky238 commented 4 years ago

and how to register extensions?

jamesnben commented 3 years ago

Here is a bit more comprehensive of a solution with Angular 10 using ControlValueAccessor. The main benefit is a validator for the mask. It also handles a case where ? means optional character for AngularJS UI mask which is based on Herbots mask:

https://stackblitz.com/edit/angular-10-herbots-jquery-inputmask?file=src%2Fapp%2Fdirectives%2Fui-mask.directive.ts

maxkopych commented 3 years ago

@jamesnben Thank you. Almost working I'm having trouble with dynamic placeholder. On blur it changing value that was set on init. `<input matInput type="tel" [uiMask]="'numeric'" [uiMaskOptions]="{rightAlign: false, placeholder: '', showMaskOnHover: false, showMaskOnFocus: false, allowPlus: false, allowMinus: false }" [required]="f.value.required" [(ngModel)]="form[f.key]" [placeholder]="generatePlaceholder(f)"

` Any idea how to fix that? Thank you!

KingDarBoja commented 3 years ago

Use this: https://github.com/ngneat/input-mask

jamesnben commented 2 years ago

@maxkopych I realize it took a while to respond here, but I would need a stackblitz of the problem you are encountering to help. I would only recommend only using the mask wrapper I created for Angular 2+ if you really need to keep the formatting of this particular mask. For example, if you are upgrading from AngularJS UI mask.