How to use Input mask jQuery plugin in Angular 7?

Question

I want to implement input mask in my angular 7 project. I need to know the steps to be followed.

I am trying to use this plugin.

I following the following steps.
Step 1: npm install inputmask --save
Step 2: Imported in my app rounting as import Inputmask from "inputmask";
And in declaration declarations: [Inputmask ]

Step 3: In my component.html
<input data-inputmask="'mask': '[9-]AAA-999'" im-insert="true">

I am getting following issues:
Uncaught Error: Unexpected value 'Inputmask' imported by the module 'AppRoutingModule'. Please add a @NgModule annotation.

How can fix it? Or can i get example code or link.

You werent supposed to add in AppModule instead of AppRoutingModule ? — Guilherme Alencar
– Guilherme Alencar, Commented Apr 12, 2019 at 13:10
The import Inputmask from "inputmask" is only used to import an ES module, not an Angular module. The imported ES module cannot be declared as a angular component/directive. Importing the ES module gives you access to the Inputmask for use in your typescript code, but it doesn't connect it to the angular template. — LHSnow
– LHSnow, Commented Apr 12, 2019 at 13:21

Guilherme Alencar · Accepted Answer · 2019-04-12 14:16:46Z

5

I finally found out how to fix it.

Install Jquery and inputMask

npm install jquery --save npm install inputmask --save
Add jquery and mask js to angular-cli.json

scripts: [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/inputmask/dist/jquery.inputmask.bundle.js" ]
Import in your component

import * as Inputmask from "inputmask"
Call it in NgOnInit

ngOnInit() { Inputmask().mask(document.querySelectorAll("input")); }
Add mask into input tag

<input data-inputmask="'mask': '99-9999999'" />

answered Apr 12, 2019 at 14:16

Guilherme Alencar

1,44313 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Input mask jQuery plugin in Angular 7?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related