Custom component (ionic) support

[Jonathan Ngbonga]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

TypeError: Cannot read property 'charAt' of undefined

Expected behavior

Being able to use a mask on custom/wrapper components (ionic) ion-input.

Minimal reproduction of the problem with instructions

numericMask = createMask({ alias: 'numeric' });

<ion-input
          type="password"
          inputmode="tel"
          clearInput="true"
          minlength="4"
          maxlength="10"
          [inputMask]="numericMask"
        ></ion-input>

https://ionic-qesceu.stackblitz.io/

What is the motivation/use case for changing the behavior?

Not really a change of behavior but more of a feature request (if not currently implemented)

Environment

Ionic:

   Ionic CLI                     : 6.17.0 (/Users/jonathan/.nvm/versions/node/v16.4.2/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.11
   @angular-devkit/build-angular : 12.0.3
   @angular-devkit/schematics    : 12.0.3
   @angular/cli                  : 12.0.3
   @ionic/angular-toolkit        : 4.0.0

Angular version: 12.0.3


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16.4.2  
- Platform:   Mac

Others: Here is a library that supports it but isn't maintained anymore

[Dharmen Shah]

Can you please create a repo so that I can clone and debug in that?

[Jonathan Ngbonga]

Can you please create a repo so that I can clone and debug in that?

Here we go

[Dharmen Shah]

The example uses Angular v5, we don't support that version.

[Jonathan Ngbonga]

Hi

my project uses angular 12 like initially posted. The example is just to illustrate the behavior on ionic and not angular.

i will provide an updated example shortly

[Jonathan Ngbonga]

@shhdharmen here is the same behavior on Angular 10

[Dharmen Shah]

I am sorry but we also don't support angular v10. This library supports v11+.

Please feel free to create a PR for old version support.

[Jonathan Ngbonga]

Is Angular 12 supported? is yes, Here we go

[Dharmen Shah]

@jongbonga I understood that you want support for ionic from this library. As this is a new feature request, I will keep it open and let's see it's demand, or if anyone wants to pick and fix it, that would also be great.

And it would be great if you could create a repo (not stackblitz) with ionic and this library, that will help us to run code locally, debug and add this feature.

[Dharmen Shah]

@jongbonga <ion-input> is not native <input>, that's why inputmask is not working.

And the native events like input and change are also not supported, it has custom events like ionInput and ionChange.

Considering above, I don't think we can provide support for <ion-input> soon.

But, I will keep this issue open, if anyone wants to pick this and add it as a new feature.

[Dharmen Shah]

For usage with ionic, I have added one separate module InputMaskIonicModule. More at: https://github.com/ngneat/input-mask#ionic

[Dharmen Shah]

🎉 This issue has been resolved in version 1.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Bart van den Burg]

I now have to install @ionic/angular if i want to use this library. is that intended? I'm not using ionic in my project...

[Dharmen Shah]

Reverted the changes. I will have to think more about ionic support.

[Dharmen Shah]

🎉 This issue has been resolved in version 3.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[DwieDima]

Does it support ion-input now?
Is there any workaround we can use?

[Melissa Fernandes]

@shhdharmen does it support ionic now?

[DwieDima]

My workaround is to use the library inputmask directly.
To make this work with ion-input, you have bind it to the native input. Heres a example with ionic angular:

npm install inputmask --save

import Inputmask from 'inputmask';

@ViewChild('maskedInput', { read: IonInput }) private _input: IonInput;

  public async ionViewDidEnter(): Promise<void> {
    const im = new Inputmask('(9999 9999 9999 9999)', {
      // for more options see doc
      placeholder: '',
      casing: 'upper',
    });

    const nativeInput = await this._input.getInputElement();
    im.mask(nativeInput);
  }

...

    <ion-item lines="full">
      <ion-label position="stacked">masked input</ion-label>
      <ion-input type="text" #maskedInput></ion-input>
    </ion-item>

...

Using this approach, you'll lose any build in form validation (like reactive forms).
You have to check this by your own (e.g. using regex pattern for reactive form).

[Jonathan Ngbonga]

Does it support ion-input now? Is there any workaround we can use?

You have set the input selector in the module imports like this

InputMaskModule.forRoot({ inputSelector: 'input', isAsync: true })

You can see it here