Angular-formly-cleavejs NPM

angular-formly-cleavejs

This custom type for Angular Formly is based on Cleave.js and translate it's own React component in an Angular one.

Installation

npm

npm install --save cleave.js angular-formly-cleavejs

Usage

First import the library in your project.

You need to import cleave.js angular directive and the right phone lib.

import 'cleave.js/dist/cleave-angular.min';
import 'cleave.js/dist/addons/cleave-phone.{...}';

// or

require('cleave.js/dist/cleave-angular.min');
require('cleave.js/dist/addons/cleave-phone.{...}');

Include the module in your angular app.

angular.module('app', ['eg-angular-formly-cleavejs'])

Then define a simple formly's fields array like this one.

this.fields = [
  {
    key: 'birth',
    type: 'angular-cleavejs',
    templateOptions: {
    label: 'Birth',
    cleavejs: {
      date: true,
      datePattern: ['Y', 'm', 'd']
    }
  }
];

As you can see you need to specify two things:

the angular-cleavejs custom type;
the cleavejs object that contains the input configuration;
Input configuration
You can refer to main cleave.js page for learning how to configure the input.
You can find the it's documentation and some examples here:
https://github.com/nosir/cleave.js/
https://nosir.github.io/cleave.js/
Known issues

Right now the phone region code, and thus the phone mask, doesn't work, i hope to fix it asap.