ngx-cleave-directive
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

Angular Cleave Directive

This directive integrates cleave.js into Angular Form.

It uses cleave.js to Format input text content when you are typing.

It updates the model with cleave.js formatted value or raw value by patching the viewToModelUpdate method of the NgControl object.

The directive works with Angular 13+.

Usage

1.Install cleave.js, ngx-cleave-directive and @types/cleave.js.

npm i -S cleave.js ngx-cleave-directive
npm i -D @types/cleave.js

2.Import NgxCleaveDirectiveModule to your Angular module.

import { NgxCleaveDirectiveModule } from 'ngx-cleave-directive';

@NgModule({
  imports: [
    // ...
    NgxCleaveDirectiveModule,
    // ...
  ],
  // ...
})

3.Add the cleave property to an input element or a textarea element and bind it with a legal cleave.js option.

<input type="text" ... [cleave]="{creditCard: true}">

If you want to get the raw value instead of the formatted value, you should set the property rawValue to true.

<input type="text" ... [cleave]="{numeral: true, numeralDecimalScale: 3}" [rawValue]=true>

Note: The cleave directive should be used with one of the following form directives — ngModel, formControl or formControlName.

4.Import any cleave.js addon if needed.

e.g.

import 'cleave.js/dist/addons/cleave-phone.au-cn.js';

Version Compatibility

Cleave.js ngx-cleave-directive Angular
1.3.7 ~ 1.5.0 1.0.x 4.x
1.5.1 ~ 1.5.1 1.1.x 5.x
1.6.0+ 2.0.x 5.x
2.1.x 13.x

For more details, please refer to cleave.js official site.

Version History

  • 2.1.0 Mechanism Update: use the viewToModelUpdate method of NgControl
  • 2.0.0 Ivy Compatibility
  • 1.1 Cleave 1.5.1+ Compatibility
  • 1.0 Initial Version

Good luck.

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i ngx-cleave-directive

    Weekly Downloads

    1,705

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    39.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • kingmario