Using Cleave.js directive with Ionic 4

Ionic Framework
1

Hello, When trying to use Angular Cleave Directive in Ionic 4 I’m getting this error:

Can't bind to 'cleave' since it isn't a known property of 'ion-input'.
1. If 'ion-input' is an Angular component and it has 'cleave' input, then verify that it is part of this module.
2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I have imported the module (new-reair.module.ts):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { NewRepairPage } from './new-repair.page';
import { NgxCleaveDirectiveModule } from 'ngx-cleave-directive';

const routes: Routes = [
  {
    path: '',
    component: NewRepairPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
	NgxCleaveDirectiveModule,
    RouterModule.forChild(routes)
  ],
  declarations: [NewRepairPage]
})
export class NewRepairPageModule {}

And the template looks like this (new-repair.page.html) :

...
<ion-item>
        <ion-label position="stacked">Phone</ion-label>
        <ion-input type="text" [cleave]="{phone: true}" (keyup)="onInputChange($event)" [(ngModel)]="repair.customer_phone"></ion-input>
    </ion-item>
...
2

I used this directive in the past but it didnt work. I however have to modify the code to make it work. CleaveJs is looking for but ion-input has the directive applied to it. Below is the code I modified:

const el = this.elementRef.nativeElement;

    let realEl = el.querySelector("input");

   

    if (realEl != null) {

      this._cleaveInstance = new Cleave(realEl, {

        ...this._cleave,

        onValueChanged: ({ target }) => {

          if (target.value !== this._value) {

            this.dispatchEvent(el, "input");

          }

          if (

            this._cleave.onValueChanged &&

            typeof this._cleave.onValueChanged === "function"

          ) {

            this._cleave.onValueChanged({ target });

          }

        }

      });

So I basically added this line to get the real input out of ion-input:

let realEl = el.querySelector("input");

I hope this helps