assisrafael/angular-input-masks

Opinionated input masks for AngularJS

angular-input-masks

Opinionated angular input masks. Provides ready to use masks with little (br/inscricao-estadual) to no configuration (number, cnpj, etc).

Compatibility

• angular-input-masks@~2: angular@^1.3 (however is only tested with lastest 1.x version) and ECMAScript 5 compliant browsers (however CI only tests chrome and firefox).
• angular-input-masks@~1: angular@~1.2

Installation

npm install --save angular-input-masks

Configuration

Without browserify:

1. Import the angular-input-masks-standalone.min.js script in your page. For example:

<script src="angular-input-masks-standalone.min.js"></script>

Obs: for npm the build scripts are available inside releases folder.

2. Include the module name ui.utils.masks in your angular app. For example:

angular.module('app', ['ui.utils.masks']);

With browserify:

angular.module('demo', [require('angular-input-masks')]);

Internationalization

Some masks are internationalized, so you need to include the proper angular-locale in your app(see: https://docs.angularjs.org/guide/i18n).

How to use

• Number mask Example :

<input type="text" name="field" ng-model="number" ui-number-mask>

• Define the number of decimals (default is 2):

<input type="text" name="field" ng-model="number" ui-number-mask="3">

More examples

See more usage examples in the Demo page

Other build options

If you are using npm (without browserify):

• angular-input-masks-dependencies.js: provides all external dependencies (string-mask, br-validations, momentjs)
• angular-input-masks-br.js: provides only global and BR directives, and does not include external dependencies (string-mask, br-validations, momentjs)
• angular-input-masks-us.js: provides only global and US directives, and does not include external dependencies (string-mask, br-validations, momentjs)
• angular-input-masks-fr.js: provides only global and FR directives, and does not include external dependencies (string-mask, br-validations, momentjs)
• angular-input-masks.js: provides all directives, and does not include external dependencies (string-mask, br-validations, momentjs)

If you are using npm with browserify:

• require('angular-input-masks'): provides all directives
• require('angular-input-masks/br'): only global and BR directives
• require('angular-input-masks/us'): only global and US directives
• require('angular-input-masks/fr'): only global and FR directives

Filters

Looking for related filters? Take a look at angular-br-filters

Build

npm install
npm run build

Tests

• Unit:
• Uses Karma + Jasmine
• Files: src/**/*.test.js

npm run test:unit

• e2e:
• Uses Protractor + Jasmine
• Files: src/**/*.spec.js

npm run test:e2e

• To run both tests:

npm test

angular-input-masks's Issues

bower-angular-input-masks

move release files to a separate repository.

Tasks:

• create and configure repository
• copy every release and tags to the new repository
• change bower registry
• remove release folder from this repository
• bower-release script

Include an option to hide mask symbols

It can be done using an attribute ui-mask-hide-symbols to indicate that mask symbols should be hidden, like %, $, etc

Inputting a negative number is counter intuitive

The common way to type a -1.00 value when using a mask would be: -100
By not letting a zero number not be "negative" would make the typing be counter-intuitive since the user has to type 100-

attribute integer-first needed for decimal numbers

Currently, on all examples when I start typing decimal numbers, first I enter the decimals and after that the integers are filled. It should have an option like integer-first, because users mostly like to type:

1. Integers primarily
2. Enter a decimal, . or , char (converted to their $locale)
3. And lastly they type the decimals.

The decimals should always be typed at the end. Otherwise, you pressure the user to enter double 00 unnecessarily.

Include option to specify format to parse on ui-date-mask

Moment.js is using the format YYYY-DD-MM to parse dates. But I need to use YYYY-MM-DD (MySQL date format).

Would be good to have an option to set the format that parser should use.

ui-date-mask="YYYY-MM-DD"

Keep vars off the global...

Please wrap your release code in an immediately invoking function to keep your variables off my global scope.

Using desired currency symbol

Hi;

I guess currency symbol depends on client browser's settings. What I need is, defining currency symbol by myself. Because I am writing an international back office CMS and price can be in several currencies.

#31

ui.utils.masks.ie

Ao selecionar alguns estados na diretiva de Inscrição Estadual, dá um erro:

"Cannot read property 'length' of undefined"

O estados são:

BA,PE e RN

Grato!

Сan not enter 0

When use directive ui-number-mask="0" ui-negative-number I can not enter 0
Plunker example: http://plnkr.co/edit/l7jDKQVR8jVPVltDxbrc?p=preview
Try to type 0

Without setting ui-negative-number the situation is the same

Using maxlength

If you're using maxlength(obvios it's not the way), but if you're using, it takes bug and doesn't fill the value. It would be interesting if it shows a message to remove the maxlength or something like it. Maybe, at least a message in the readme about it.

refactor to use $isEmpty

Instead of using !value or angular.isUndefined(value).

The $isEmpty function checks whether the value is undefined, '', null or NaN.

Publish to NPM

For those using Browserify, it would be useful if this is published as an NPM module

Problem at bower.json

Hello Rafael,

I'd notice that you need to add a 'main' prop to your bower.json, otherwise, plugins like bowerFiles will not work with this.

You just need to add "main": "./releases/masks.min.js" to your bower.json and that's it. :)

Error on load string value from database

TypeError: undefined is not a function
at Array. (http://localhost:9000/bower_components/angular-input-masks/releases/masks.js:1295:35)

i try fix with:

            ctrl.$formatters.push(function(value) {
                if(!value) {
                    return value;
                } else {
                    /////ADD PARSEFLOAT BEFORE TOFIXED
                    value = parseFloat(value);
                }
                return moneyMask.apply(value.toFixed(decimals).replace(/[^\d]+/g,''));
            });

all directives should throw an error if used without ng-model

Some directives are declaring ngModel as optional require: '?ngModel',.

refactor ui-br-phone-number and ui-us-phone-number in a core component

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/9218913-refactor-ui-br-phone-number-and-ui-us-phone-number-in-a-core-component?utm_campaign=plugin&utm_content=tracker%2F1022469&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F1022469&utm_medium=issues&utm_source=github).

Negative number bug

The ui-negative-number have bugs if you change a negative number.

remove $log.debug disable

Why disable $log.debug here:

angular-input-masks/src/masks.js

Line 18 in 2ea7504

$logProvider.debugEnabled(false);

When included as a dependency, this disabled $log.debug in my app. I had to override the line in my own app to get back to the default state (enabled).

ui-money-mask formatter do not work for value 0

When the model value is 0 the ui-money-mask formatter is returning 0 instead of R$0,00

US Phone numbers

Hi folks,

This is a lovely project. I forked it and made a slight adjustment for it to work for US phone numbers, as they're usually formatted "0 [phone]" or "[phone]". Perhaps worth considering having a different directive for such formats?

Cheers,
Kapil

Error when loading data from API

I'm using the ui-money-mask, and I have a problem when I receive the number from API. It's probably occurring because the mask is rendering before the data is loaded. It throws "undefined is not a function" error on mask.js:1293.

return moneyMask.apply(value.toFixed(decimals).replace(/[^\d]+/g,''));

My code:

<input type="text" class="form-control" ng-model="tabela.preco" ui-money-mask required>

Thank you.

Keep mask but allow optional fields

I want to keep the mask of an optional field, but still want the mask on it. Setting ng-model-options to allowInvalid have no effect. Should either check for required attribute, or check ng-model-options using require: ['?ngModel', '?ngModelOptions']

Change default separators

Hey.

I think it is something with the locale, but, how can I change the number separators?
For example, I first added the directive on the input and the result of typing is, e.g. 123,456.00. Is there some way to change to 123.456,00? Just invert comma and dot in the number separation.

Thank's. :)

ui-br-phone sem ddd

Olá, tem alguma forma de colocar a máscara de telefone BR mas sem o DDD no início ? Minha aplicação usa o DDD em um campo separado.
Abs

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/11235440-ui-br-phone-sem-ddd?utm_campaign=plugin&utm_content=tracker%2F1022469&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F1022469&utm_medium=issues&utm_source=github).

Bug in IE

Got this error in IE8 today, using the latest version from master.

Line: 12
Character: 24
Code: 0
Error Message: Expected identifier, string or number
URL: .../masks.js

Formatar textos fora de inputs

Amigão, tem como utilizar sua biblioteca para formatar um texto que não esteja em um input?
Ex:

CPF: {{paciente.numero_documento}}

Gostaria que esse CPF fosse formatado sem que precisasse coloca-lo em um input. Há alguma forma de fazer isso?

Tem como pega o valor não formatado ?

Rafael, tem como pegar o valor não formatado, o actualValue ??

tks que belo trabalho

Date mask

I'm just missing a BR Date mask, like "31/12/2014".

Implement tests

Percentage mask do not apply when value is 0

Hi Rafael.

There is an issue when the model of the input is 0. It seems like the ui.utils.masks.global.percentage ignores it.

Here is a Plunker with the problem. I'm using the 1.4.0.

http://plnkr.co/edit/Eh8s375HCgnsuM7WXwDv?p=preview

I tried to understand the conversion but my knowledge on Angular is too limited yet.

Thanks!

Incorrect model value for time mask

ui-time-mask is storing model value without delimiter ':'

Documentar uiDateMask e uiNfeAccessKeyMask

Vi no código, mas não tem no README ;)

ui-money-mask throws error when typing non digits

TypeError: Cannot read property 'replace' of undefined
This error points to somewhere inside StringMask.

Also, this error only appears if the model is empty.

Scientific notation

a x 10^b

where the precision can be parametrized.

failing to initialize

I'm trying to use the angular-input-masks but I'm getting the error below.

I already have a moment.js installed via another pluging angular-moment.

Uncaught Error: [$injector:modulerr] Failed to instantiate module clubeDoAdvogado due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyLoad due to:
Error: [$injector:nomod] Module 'angular-momentjs' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Any idea on how to fix it?

Regards

Match regex before applying mask

Check if the current $modelValue matches the desired mask, instead of forcefully removing all the non matching characters first.

Example: if I have an input with <input type="text" ui-br-cep-mask ng-model="user.data.cep"> and user.data.cep is "00000-000" (this is the $modelValue) don't try to change the $viewValue of it, or the input will become truncated because of these lines:

var formatedValue = processed.result;
return formatedValue.trim().replace(/[^0-9]$/, '');

Before this line, it's saying 00000- and that's not valid. It may be a bug.

The input will be set to 00000 instead of 00000-000 because of this. The same goes to all other directives (CPF, CNPJ, Date, etc)

IMHO an UI library shouldn't dictate the format of the data that goes into the database, the library should fit the data you provide to it. I always keep the format in the database, and would never store a mobile as an int like 11999999999 into the database

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/9576006-match-regex-before-applying-mask?utm_campaign=plugin&utm_content=tracker%2F1022469&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F1022469&utm_medium=issues&utm_source=github).

IE8 reserved word

I tried to use your library in IE8 and it immediately blew up. In the definition of var tokens the use of "default" is causing problems because it is a reserved word. If I changed it to _default the library works perfectly in IE8.

Keep the mask in the model

Hello folks!

Is there any way to keep the mask (with the symbols) in the model?

Thanks!

Integer mask

Does it have a integer mask?

Como pegar CNPJ/CPF valido na controller?

Como faço para saber se um campo é valido na minha controller? No exemplo só tem como verificar se o CPF/CNPJ é valido atraves do binding, no HTML -> {{campo.$error}}.

Tem como pegar esse $error na controller?

ui-negative-number displays positive number

function ctrl($scope) {
$scope.negative = -500;
}

input type="text" name="field2" ng-model="negative" ui-number-mask="0" ui-negative-number

displays input with value=500 (not -500)

ui-nfe-key-mask

An input mask for NF-e access key (chave de acesso): 44 digits separated by whitespaces every 4 digits.

Idade "legal"

Como tem nos EUA que você precisa ter mais de 13 para usar o serviço, blah blah, poderia ter um validador de data de aniversário, com uma idade mínima tipo <input ui-min="18" ui-birthday-mask> e validar se também o aniversário / meses são válidos (tirando as exceções, tipo anos bissextos)

Desabilitar validação CPF

Tem alguma possibilidade de desabilitar a validação do CPF?

Gostaria de deixar somente a mascara pois faço a validação no servidor, do modo atual ele lança um erro falando que o cpf é inválido antes de enviar as informações pro servidor.

Add gh-pages for demo

Could you please create a gh-pages branch to have GitHub host the demo for you? Because nobody likes to have to clone a repo just to see the demo. If you're not familiar with how easy it is to setup a free github hosted demo page for your project, I gave a talk about this at a local meetup recently: http://slides.com/kentcdodds/gh-pages

Safari mask

I have tested the input-mask (cpf, telefone) in safari browser, and it didn't work fine. You start typing the CPF and the cursor don't follow the right sequence.

e2e test not accepting input into a field with a mask

I have a case where I need to input a phone number into an input field that has a mask. My issue is that when I remove the mask it all works fine, however when the mask is in place the UI does not register the key values.

The input field is

and my test script:

it('enter details', function() {
//select layout
browser.driver.findElement(by.name("layout(2)")).click();
//input phone numbers
var buttons1 = element(by.repeater('button in phone.buttons').row(0));
buttons1.element(by.model('button.name')).sendKeys('joe');
buttons1.element(by.model('button.number1')).sendKeys('0824669595');
var continueBtn = element(by.linkText('Continue')).click();
});

Only validate if non-empty

When using a reference for min/max check if it is non-empty while validating.

uiBrIeMask

in the uiBrIeMask i have a situation how i do to put string "isento"

Time mask

• full mode: HH:MM:SS
• short mode: HH:MM