Using Cleave.js directive with Ionic 4

@newelementdesigns wrote:

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>
...

Posts: 1

Participants: 1

Read full topic