inputmask doesn't work with primeng calendar + angular library

31 Views Asked by At

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:

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?

0

There are 0 best solutions below