jsdaddy/ngx-mask

Angular Plugin to make masks on form fields and html elements.

ngx-mask's Issues

ionic 2

No ion-input ionic 2 does not work, would have some solution for this

Validation with ng.dirty with mask field getting dirty

I'm using anglar 5, in some input I'm using ngx-mask, it's doing some validations the inputs that contain the masks are getting dirty.

Esm module

First of all thanks for your package and that you still maintain it.
Secondly, as a consumer, of the package I expect that it would be bundled into ES5 umd style. And I do not need to care about precompile my imported/required sources.

In order to do this you can:

• Set the value of the main property of package.json to point to the ES5 UMD bundle.
• Set the value of the module property to point to the entry file of the esm version of the library. module is a field in package.json where bundlers such as rollup and webpack 2 expect to find a reference to the ES2015 version of the code. Note that some older versions of the bundlers use jsnext:main instead of module so we need to set both properties.

More here Distributing an Angular Library - The Brief Guide

Alternative is to use ng-packagr

Function calls are not supported

Im use this library at ng2-admin template. Then i run npm start i get.

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in D:/My Documents/git/projectname/node_modules/ng2-mask/node_modules/@angular/core/core.d.ts, resolving symbol Ng2MaskModule in D:/My Documents/git/projectname/node_modules/ng2-mask/build/ng2-mask.module.d.ts, resolving symbol Ng2MaskModule in D:/My Documents/git/projectname/node_modules/ng2-mask/build/ng2-mask.module.d.ts

My dependencies are:
"dependencies": { "@angular/animations": "4.0.1", "@angular/common": "4.0.1", "@angular/compiler": "4.0.1", "@angular/core": "4.0.1", "@angular/forms": "4.0.1", "@angular/http": "4.0.1", "@angular/platform-browser": "4.0.1", "@angular/platform-browser-dynamic": "4.0.1", "@angular/router": "4.0.1", "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.23", "@ngx-translate/core": "6.0.1", "@ngx-translate/http-loader": "0.0.3", "angular-chart.js": "^1.1.1", "angular2-datatable": "latest", "angular2-tooltip": "^3.1.0", "@angular/cli": "1.1.0", "animate.css": "3.5.2", "bootstrap": "4.0.0-alpha.6", "chart.js": "^2.5.0", "chartjs-plugin-zoom": "^0.5.0", "chroma-js": "1.3.3", "ckeditor": "4.6.2", "core-js": "2.4.1", "easy-pie-chart": "2.1.7", "font-awesome": "4.7.0", "fullcalendar": "3.3.1", "google-maps": "3.2.1", "hammerjs": "^2.0.8", "ionicons": "2.0.1", "jquery": "^3.2.1", "jquery-slimscroll": "1.3.8", "leaflet": "0.7.7", "leaflet-map": "0.2.1", "lodash": "4.17.4", "ng2-charts": "^1.6.0", "ng2-completer": "1.3.1", "ng2-handsontable": "0.48.0", "ng2-inline-editor": "^0.1.1-alpha.20", "ng2-mask": "^1.1.0", "ng2-rest": "^7.2.2", "ng2-slim-loading-bar": "4.0.0", "ng2-smart-table": "1.0.3", "ng2-tree": "2.0.0-alpha.5", "ngx-tabs": "0.0.13", "ngx-uploader": "2.2.5", "normalize.css": "6.0.0", "roboto-fontface": "0.7.0", "rxjs": "5.1.0", "web-animations-js": "latest", "zone.js": "0.8.4" }

Problem resetting the value of masked input field

Passing null, undefined or empty string as the value for masked input does not reset its value as expected; masked input just does not change at all. Most likely it happens because of the check in mask.directive.ts method writeValue:

public writeValue(inputValue: string): void {
    if (!inputValue) {
      return; }

The only thing that works is setting input value to a string containing just a single space symbol, though setting null or undefined seems like expected behaviour.

Need define optional caractere

We need define opcional caractere in the pattern

IE11NotSupported

Hi guys I tried to run the ngx-demo using internet explorer 11 but it is not working(page hangs at Loading...) although it is working fine in chrome. I am also working on a project in which I am using ngx-mask for my inputs and the mask works fine in chrome but doesn't work in IE11. Would someone help me .
Also noticed in the polyfills.ts file of the demo the imports for IE11 are commented out. So I guess that's why the demo is not working in IE11.
Any help on this will be appreciated

Import Problem

I am getting this error while executing 'ng serve':

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 10:22 in the original .ts file), resolving symbol Ng2MaskModule in D:/GitWork/web-ui/node_modules/ng2-mask/build/ng2-mask.module.js, resolving symbol AppModule in D:/GitWork/web-ui/src/app/app.module.ts, resolving symbol AppModule in D:/GitWork/web-ui/src/app/app.module.ts

This is my package.json:
"dependencies": { "@angular/animations": "^4.0.2", "@angular/common": "^4.0.2", "@angular/compiler": "^4.0.2", "@angular/core": "^4.0.2", "@angular/forms": "^4.0.2", "@angular/http": "^4.0.2", "@angular/material": "^2.0.0-beta.3", "@angular/platform-browser": "^4.0.2", "@angular/platform-browser-dynamic": "^4.0.2", "@angular/platform-server": "^4.0.2", "@angular/router": "^4.0.2", "@angular/upgrade": "^4.0.2", "angular-utf8-base64": "0.0.5", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "crypto-js": "^3.1.9-1", "hammerjs": "^2.0.8", "jquery": "^3.2.1", "lodash": "^4.17.4", "material": "^0.1.1", "md2": "0.0.19", "ng2-device-detector": "^0.1.0", "ng2-mask": "^0.5.2", "ntypescript": "^1.201609302242.1", "reflect-metadata": "^0.1.10", "rxjs": "^5.1.0", "systemjs": "^0.20.12", "underscore": "^1.8.3", "zone.js": "^0.8.4" },

More digits at FormControl that was typed

TEMPLATE

 <input placeholder="CEP" [formControl]="form.get('dadosEndereco.endereco.cep')" mask="99999-999">

When i type more digits that was defined in mask, strange behavior happens, the last typed digit in definied in FormControl value, so the value has one more digit.

Metadata version mismatch for module

Error: Metadata version mismatch for module C:/inetpub/wwwroot/ngx-workspace/client-code/e-dog/node_modules/ngx-mask/build/config.d.ts, found version 4, expected 3
at StaticSymbolResolver.getModuleMetadata (C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\compiler\bundles\compiler.umd.js:25616:34)
at StaticSymbolResolver._createSymbolsOf (C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\compiler\bundles\compiler.umd.js:25404:46)
at StaticSymbolResolver.getSymbolsOf (C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\compiler\bundles\compiler.umd.js:25385:14)
at C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\compiler\bundles\compiler.umd.js:24241:30
at Array.forEach ()
at extractProgramSymbols (C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\compiler\bundles\compiler.umd.js:24240:79)
at AotCompiler.analyzeModulesAsync (C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\compiler\bundles\compiler.umd.js:23796:47)
at CodeGenerator.codegen (C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\compiler-cli\src\codegen.js:32:14)
at codegen (C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\compiler-cli\src\main.js:13:81)
at Object.main (C:\inetpub\wwwroot\ngx-workspace\client-code\e-dog\node_modules@angular\tsc-wrapped\src\main.js:106:16)
Compilation failed
error Command failed with exit code 1.

And my package.json:

 "dependencies": {
    "@angular/animations": "4.4.6",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/platform-server": "4.4.6",
    "@angular/router": "4.4.6",
    "@ngrx/effects": "^4.0.0",
    "@ngrx/router-store": "^4.0.0",
    "@ngrx/store": "^4.0.0",
    "@ngrx/store-devtools": "^4.0.0",
    "core-js": "2.4.1",
    "intl": "1.1.0",
    "ngx-cookie": "^1.0.0",
    "ngx-mask": "^2.1.17",
    "pikaday": "^1.6.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "~5.4.2",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.4.6",
    "@types/pikaday": "^1.6.3",
    "@types/requirejs": "2.1.28",
    "@types/underscore": "^1.8.3",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "3.2.3",
    "compression-webpack-plugin": "0.3.1",
    "copy-webpack-plugin": "^4.1.1",
    "css-loader": "0.28.7",
    "extract-text-webpack-plugin": "3.0.1",
    "file-loader": "1.1.4",
    "html-minify-loader": "1.3.0",
    "raw-loader": "0.5.1",
    "rimraf": "2.5.4",
    "style-loader": "0.19.0",
    "typescript": "~2.4.1",
    "webpack": "3.6.0"
  },

angular 5

Hello.
is there any idea for the component to be compatible with angular 5?

when we update angular-cli to version 1.5 and we use the new angular 5, even in a totally blank project, the ngx-mask component informs error:

WARNING in ./node_modules/ngx-mask/node_modules/@angular/core/@angular/core.es5.js
5659:15-36 Critical dependency: the request of a dependency is an expression........

Thanks.

I got ../src/app/app.module.ts (49,27): Cannot find name 'options'.

Here is the part of the code that is returning the error:

@NgModule({
declarations: [
AppComponent,
FooterComponent,
DialogComponent
],
imports: [
...
NgxMaskModule.forRoot(options), (This is line 49)
...
],

Any would be appreciated.

I follow thi tutorial: https://github.com/JsDaddy/ngx-mask

extend docs with more examples

• simple attribute
• different masks
• ngModel use
• formControl (for reactive forms)

Is it possible to enter non-english characters with A/S mask?

For example Russian letters :)

JS ERROR SyntaxError: Importing binding name 'Input' is not found.

Has anyone experienced the following error when using Ng2MaskModule in an Angular 2 /Nativescript project?

When I add the module dependency into the app.module.ts file, I get the following error.
JS ERROR SyntaxError: Importing binding name 'Input' is not found.

Thanks!

Support for Angular5

This is not working for Angular5. Could please let us know for release plan.
Thanks 👍

Add CONTRIBUTING.md

We should add CONTRIBUTING.md with our specific rules . You could use https://github.com/angular/angular/blob/master/CONTRIBUTING.md

Field is losing pristine property

Hi! First, thank you for your lib! It's being very useful...
I am only having a problem with obligatory fields validation because when I use a mask, the pristine property is set to false....

Thanks,

Luciana

Runtime exception when building AOT

A .map of undefined on maskSpecialCharacters when trying to create a regex in the constructor.

Error encountered resolving symbol values statically. Calling function 'InjectionToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol config in /ngx-mask/build/config.d.ts, resolving symbol NgxMaskModule.forRoot

I tried to run ng serve from the repository but it's not working.
Versions.

@angular/cli: 1.4.8
node: 8.7.0
os: darwin x64
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.8
@angular/compiler-cli: 4.4.6
typescript: 2.5.3

ERROR in Error: Error encountered resolving symbol values statically. Calling function 'InjectionToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol config in ../app/node_modules/ngx-mask/build/config.d.ts, resolving symbol NgxMaskModule.forRoot in ../app/node_modules/ngx-mask/build/ngx-mask.module.d.ts, resolving symbol HrModule in ../app/src/app/hr/hr.module.ts, resolving symbol HrModule in ../app/src/app/hr/hr.module.ts

compile AOT

Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function
calls are not supported. Consider replacing the function or lambda with a reference to an exported function,
resolving symbol Injectable in
*****/node_modules/ngx-mask/node_modules/@angular/core/core.d.ts,
resolving symbol ɵe in

Uncaught Error: Unexpected value '[object Object]' imported by the module X.

Hi!

I am trying to use [email protected]. By the way whole code is available here: sharikovvladislav/ng2-diary-book#77)

I imported your module this way NgxMaskModule.forRoot(), and I got this error:

compiler.es5.js:1690 Uncaught Error: Unexpected value '[object Object]' imported by the module 'TagsAutoCompleteModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.es5.js:1690)
    at compiler.es5.js:15382
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary (compiler.es5.js:15307)
    at compiler.es5.js:15380
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary (compiler.es5.js:15307)
    at compiler.es5.js:15380
syntaxError @ compiler.es5.js:1690
(anonymous) @ compiler.es5.js:15382
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15365
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary @ compiler.es5.js:15307
(anonymous) @ compiler.es5.js:15380
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15365
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary @ compiler.es5.js:15307
(anonymous) @ compiler.es5.js:15380
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15365
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules @ compiler.es5.js:26795
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26768
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26697
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
../../../../../src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap 69b546962c2a7115b033:54
0 @ tags-common.styles.css:8
__webpack_require__ @ bootstrap 69b546962c2a7115b033:54
webpackJsonpCallback @ bootstrap 69b546962c2a7115b033:25
(anonymous) @ main.bundle.js:1

I did that because of example in your code: https://github.com/NepipenkoIgor/ngx-mask/blob/master/src/app/app.module.ts#L33

What is the problem?

svlad at sharikovvlad in ~/dev/ng2-diary-book on master [!]
$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.0
node: 8.4.0
os: darwin x64
@angular/animations: 4.3.5
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.5
@angular/language-service: 4.3.5

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-mask
$ 

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-mask
$ yarn list | grep ngx-mask
├─ [email protected]

svlad at sharikovvlad in ~/dev/ng2-diary-book on feature/add-mask
$ 

Repro:

0. Clone the repo (probably git clone -b feature/add-mask [email protected]:sharikovvladislav/ng2-diary-book.git is enough)
1. cd ng2-diary-book
2. yarn
3. yarn start (note: it is possible to get ERROR in Error encountered resolving symbol values statically after the compile, read below for instructions)
4. Open http://localhost:4200/ in your browser

Expectations: no errors in the browser console
Real world:

If you get this after step 2:

ERROR in Error encountered resolving symbol values statically. Calling function 'InjectionToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol config in C:/dev/ng2-diary-book/node_modules/ngx-mask/build/config.d.ts, resolving symbol NgxMaskModule.forRoot in C:/dev/ng2-diary-book/node_modules/ngx-mask/build/ngx-mask.module.d.ts, resolving symbol TagsAutoCompleteModule in C:/dev/ng2-diary-book/src/app/core/features/components/tags-autocomplete/tags-autocomplete.module.ts, resolving symbol TagsAutoCompleteModule in C:/dev/ng2-diary-book/src/app/core/features/components/tags-autocomplete/tags-autocomplete.module.ts

You need to change something in watched files. For example add some 'space' somewhere. If I remember correctly its because of angular/cli problem (I still didn't update it :'( )

github pages with presentation and examples

Errors while compiling

ERROR in [default] .../node_modules/ng2-mask/src/app/ng2-mask/mask.directive.ts:70:45
Property 'includes' does not exist on type 'string[]'.

ERROR in [default] .../node_modules/ng2-mask/src/app/ng2-mask/mask.directive.ts:81:37
Property 'includes' does not exist on type 'string[]'.

Changed to indexOf > -1 and it's working fine.

Tks

RegEx for 24 hour time only allowing 0 as input

I am not sure if i am implementing the RegExp right but this is what i have at the moment:

patterns="{ {pattern: new RegExp([0-9]{1,2}:[0-5][0-9])|([0-9]{1,2}\.[0-9]{1,2}), true}}" mask="00:00"

This is only allowing me to type 00:00 rather than 23:59 for example.

Any help would be much appreciated

Can it work with ionic's ion-input?

Hi, I tried use your directive with Ionic 2 ion-input, however nothing happened:

<ion-item>
            <ion-label floating>CEP</ion-label>
            <ion-input type="text" name="cep" id="cep" #cepInput="ngModel"
                       [(ngModel)]="cliente.cep" specialCharacters="false" mask='00.000-000'
                       required></ion-input>
  </ion-item>

Is there something I can do to make it work with Ionic?

Error: More than one custom value accessor matches form control with unspecified name attribute

Hey,

I 'm using the Angular 5.0 and Angular Material 2.0.0-beta.8, when i applied the ngx-mask within my custom component i got the below error

 <md-input-container class="full-width">
  <input mdInput [mdDatepicker]="datepicker" placeholder="Date" mask="00/00/0000" dropSpecialCharacters="false" [placeholder]="label"
    [required]="required" [formControl]="formControl" />

  <md-datepicker #datepicker></md-datepicker>
  <span class="fa fa-calendar" mdPrefix>&nbsp;</span>
  <md-error *ngIf="error">{{ error }}</md-error>
</md-input-container>

ng:///FormComponentsModule/DateComponent.ngfactory.js:36 ERROR Error: More than one custom value accessor matches form control with unspecified name attribute
at _throwError (webpack-internal:///../../../forms/esm5/forms.js:2463)
at eval (webpack-internal:///../../../forms/esm5/forms.js:2544)
at Array.forEach ()
at selectValueAccessor (webpack-internal:///../../../forms/esm5/forms.js:2533)
at new FormControlDirective (webpack-internal:///../../../forms/esm5/forms.js:6463)
at createClass (webpack-internal:///../../../core/esm5/core.js:12363)
at createDirectiveInstance (webpack-internal:///../../../core/esm5/core.js:12206)
at createViewNodes (webpack-internal:///../../../core/esm5/core.js:13644)
at callViewAction (webpack-internal:///../../../core/esm5/core.js:14076)
at execComponentViewsAction (webpack-internal:///../../../core/esm5/core.js:13985)

It seems that the formControl attribut is causing the issue when removing it any clue to resolve the issue

Thanks and regards

How to provide IP address mask in CIDR notation?

Hi,

Can you provide an expample of IP address CIDR notation mask?

Thank You!

PS: For example: 192.168.1.17/24

Documentation

I'm very interest to use this module but I need a documentation to understand at least the mask pattern.

This module is alive yet?

I can contribute with if it help.

Thanks.

Set mask as non on dynamic and conditional directive?

How do I set make to none when I'm using mask as a directive that's being set conditionally?

[mask]='question.maskText? question.maskText : null'

when input element focus or touched ,the element no class ng-touched

class="form-control ng-valid ng-untouched ng-dirty"

after focus or touched should class="form-control ng-valid ng-touched ng-dirty"

Problem when I build for production in Angular-Cli

When I try execute ng build --prod or ng build --prod --aot always returns the error below:

`
ERROR in Error encountered resolving symbol values statically. Could not resolve type Document (position 40:41 in the original .ts file), resolving symbol MaskDirective in /home/username/Documents/my-project/node_modules/ng2-mask/build/mask.directive.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/username/Documents/my-project/src'
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts
`
I created an empty project by importing only ng2-mask and got the same problem.

My environment:
@angular/cli: 1.1.1 node: 7.0.0 os: linux x64 @angular/animations: 4.1.3 @angular/common: 4.1.3 @angular/compiler: 4.1.3 @angular/core: 4.1.3 @angular/forms: 4.1.3 @angular/http: 4.1.3 @angular/platform-browser: 4.1.3 @angular/platform-browser-dynamic: 4.1.3 @angular/router: 4.1.3 @angular/cli: 1.1.1 @angular/compiler-cli: 4.1.3 @angular/language-service: 4.1.3

Runtime exception when building Prod flag

A .map of undefined on maskSpecialCharacters when trying to create a regex in the constructor.

mask="0.00" Doesn't work on angular 5

mask="0.00"

Doesn't work on angular 5

<input type="tel" mask="0.00" class="form-control input-lg" [ngModel]="fuel.sellingPrice | number : '1.2-2'" (ngModelChange)="value=$event">

but mask="00.00" works

apply more patters for the mask

Not only numbers

Could be taken from here - https://igorescobar.github.io/jQuery-Mask-Plugin/

can you keep the decimal point two

eg. *.00

Optional character in mask

Is it possible to have an option character in the mask?

Example, in Brazil the phone numbers can be (11) 1234-1111 or (11) 12349-1111. In other words, the "mask" is (00) 0000?-0000 where "?" is an optional character. Is it possible to achieve this with the library?

Zipcode Mask 5 or 9 Character(clearIfNotMatch)

I need zipcode mask '99999-?9?9?9?9?'

So Zipcode can take either 5 or 9 characters.This should work also for clearIfNotMatch

How would i do an email mask?

for example [email protected]

As validação com o ng.dirty está identificando que o campo está sujo

Angular 5.0.1 -- Possible Bug

When in the html is inserted the mask, I have this error that does not let my component be loaded, linking to another InjectionToken error, and when I remove the mask everything works.

below the image of the same.

Erro no HTML

InjectionToken

How to input decimal?

E.g 0.##,less than 1 and big than 0.

Wrong behaviour for conditional binding

Works ok when config.inputMask has a value at below example:

<input matInput [mask]="config.inputMask ? config.inputMask : null" ...

But ngx-mask permits to write to input if config.inputMask is undefined. There's no mask attribute when I inspect element with chrome developer tools.

<input _ngcontent-c22="" class="mat-input-element mat-form-field-autofill-control" matinput="" 
    ng-reflect-placeholder="Name" placeholder="Name" name="name" 
    maxlength="50" id="mat-input-7" aria-invalid="false">

I'll be glad if you can give an example for conditional binding if I've implemented it wrong.

I think ngx-mask binds itself to input even if config.inputMask is undefined, and blocks user to type.

ngx-mask/src/app/ngx-mask/mask.service.ts

Lines 47 to 49 in b2254d8

	if (result.length === maskExpression.length) {
	break;
	}

error when use in angular2 version 2.4.6

"Error: Can't resolve all parameters for MaskDirective: ([object Object], ?).
at SyntaxError.ZoneAwareError (http://0004.saas.com:6999/polyfills.bundle.js:9956:33)
at SyntaxError.BaseError [as constructor] (http://0004.saas.com:6999/vendor.bundle.js:94487:16)
at new SyntaxError (http://0004.saas.com:6999/vendor.bundle.js:11305:16)
at CompileMetadataResolver._getDependenciesMetadata (http://0004.saas.com:6999/vendor.bundle.js:24884:31)
at CompileMetadataResolver._getTypeMetadata (http://0004.saas.com:6999/vendor.bundle.js:24759:26)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://0004.saas.com:6999/vendor.bundle.js:24399:24)
at CompileMetadataResolver._loadDirectiveMetadata (http://0004.saas.com:6999/vendor.bundle.js:24275:23)
at http://0004.saas.com:6999/vendor.bundle.js:24476:54
at Array.forEach (native)
at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://0004.saas.com:6999/vendor.bundle.js:24475:41)
at http://0004.saas.com:6999/vendor.bundle.js:59902:58
at Array.forEach (native)
at JitCompiler._loadModules (http://0004.saas.com:6999/vendor.bundle.js:59901:43)
at JitCompiler._compileModuleAndComponents (http://0004.saas.com:6999/vendor.bundle.js:59856:52)
at JitCompiler.compileModuleAsync (http://0004.saas.com:6999/vendor.bundle.js:59822:21)"

Mask doesn't work perfectly on mobile

I want to use ngx-mask for a responsive angular4 project.

Tried in the example at https://nepipenkoigor.github.io/ngx-mask/ and on mobile browsers the inputs bug when a special character is inputted by its mask. It acts like the cursor goes 1 character back

ERROR in Ng2MaskModule is not an NgModule

Has anyone ran into this error? I did the install and
import { Ng2MaskModule } from 'ng2-mask';
then added it to my imports in the app.module and get
ERROR in Ng2MaskModule is not an NgModule when running ng serve

Curious if this is something anyone has run into before I start digging around

Unexpected value 'NgxMaskModule'

I am getting unexpected value 'NgxMaskModule; in my AppModule. This started to happen when I got the latest code. Did something changed? Any ideas?

I am using angular2

Thanks

Error in Module

Hello everyone,

I want to implement this component, I imported it into my ngModule as follows:

...
import { NgxMaskModule } from 'ngx-mask';
...

@NgModule({
providers: [
...
],
declarations: [
...
],
imports: [
...
NgxMaskModule.forRoot(),
...
],
...
})

but when I run the project the following error occurs:

An unhandled exception occurred while processing the request.

NodeInvocationException: Document is not defined
ReferenceError: Document is not defined
at MaskService.ctorParameters (F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\main-server.js:45113:17)
at ReflectionCapabilities.module.exports.ReflectionCapabilities._ownParameters (F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\vendor.js:12474:93)
at ReflectionCapabilities.module.exports.ReflectionCapabilities.parameters (F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\vendor.js:12504:48)
at JitReflector.module.exports.JitReflector.parameters (F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\vendor.js:62880:44)
at CompileMetadataResolver.module.exports.CompileMetadataResolver._getDependenciesMetadata (F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\vendor.js:51185:71)
at CompileMetadataResolver.module.exports.CompileMetadataResolver._getTypeMetadata (F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\vendor.js:51110:26)
at CompileMetadataResolver.module.exports.CompileMetadataResolver._getInjectableMetadata (F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\vendor.js:51096:21)
at CompileMetadataResolver.module.exports.CompileMetadataResolver.getProviderMetadata (F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\vendor.js:51387:40)
at F:\xxxxxxxxxxx\NetCore\ooooooooooo\ClientApp\dist\vendor.js:51316:49
at Array.forEach ()

Please help

Regex Mask

plz cant you add regex mask for validation mask. That is very help all programmer
Ex:

<input matInput [maskType]="regex" [mask]="\[A-z]{2} [0-9]{3}\" ...

input trying to load data

when using a click function to pass json object to input text box nothing shows. It works if I type it in but not loading.

ERROR Error: Uncaught (in promise): TypeError: inputValue.split is not a function
TypeError: inputValue.split is not a function
at MaskDirective._applyMask (mask.directive.js:94)
at MaskDirective.writeValue (mask.directive.js:72)