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.

Package Sidebar

Install

npm i ngx-cleave-directive

Weekly Downloads

1,492

Version

2.1.0

License

MIT

Unpacked Size

39.1 kB

Total Files

15

Last publish

Collaborators

  • kingmario