I'm trying to apply an input mask to the primeng calendar component. All this within a library of angular components but i'm having some problems.
Some versions context:
- Angular 15
- Primeng 15
- Inputmask lib 5.0.8 (https://github.com/RobinHerbots/Inputmask)
What i did is:
- create the component that use PrimeNg calendar and set the attribute offered by the inputmask library to control the input:
import Inputmask from 'inputmask';
import { Calendar } from 'primeng/calendar';
export class DatepickerComponent {
// other variables ...
public maskDateFormat: string = '99/99/9999'; //just as an example of the format
@ViewChild(Calendar, { static: false }) Calendar!: Calendar;
getHTMLInput(): HTMLInputElement {
return this.Calendar.el.nativeElement.querySelector('input');
}
ngAfterViewInit(): void {
// other instructions not related to this...
const input: any = this.getHTMLInput();
input.setAttribute("data-inputmask", `'mask':'${this.maskDateFormat}'`)
Inputmask().mask(input);
}
}
All of this is inside a storybook project so i can test the library during the development and inside storybook everything works perfectly. The mask is applied and i have no errors.
The problem is when i try to use the component in an external project. When i use it i receive an error that says:
core.mjs:8400 ERROR TypeError: inputmask__WEBPACK_IMPORTED_MODULE_1__ is not a function
at DatepickerComponent.ngAfterViewInit (myLibrary-components.mjs:2629:9)
at callHook (core.mjs:2434:22)
at callHooks (core.mjs:2403:17)
at executeInitAndCheckHooks (core.mjs:2354:9)
at refreshView (core.mjs:10397:21)
at refreshComponent (core.mjs:11385:13)
at refreshChildComponents (core.mjs:10116:9)
at refreshView (core.mjs:10376:13)
at refreshEmbeddedViews (core.mjs:11339:17)
at refreshView (core.mjs:10350:9)
The error line refers to the instruction Inputmask().mask(input); Somehow it is not able to create an instance of Inputmask inside another project.
I also tried to:
- recreate the component inside the external project and everything works fine (but i need it to be in the library)
- try to create a directive inside the library but same problem (in the storybook environment works perfectly but same error in the external project)
Any suggestion to solve this?