afc

angular-formly-cleavejs

A custom input type for integrating Cleavejs into Angular Formly

Showing:

Popularity

Downloads/wk

15

GitHub Stars

1

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

angular-formly-cleavejs

npm version npm downloads MIT license

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:

  1. the angular-cleavejs custom type;

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

Todo

  • Fix phone mask
  • Add some tests

Get in touch

References

License

angular-formly-cleavejs is licensed under the MIT License (MIT)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial