Ngx-mask: Add comma in specialCharacters

[em-gei]

Hi, i think your mask is really powerfull and maybe the best at the moment, but the missing comma in the specialCharacter is a strong defeact! The point char can be use as thousand separator, not as decimal separator.

Could you please add the comma so we'll be able to use the mask for currency (example 557.145,99) ?

The best thing would be add in the configuration an option like (decimal: boolean) that flagged true let user to digit decimal values and keep it in the model (example input 557.145,99, model 557145,99)

Hope you will fix asap, thank you!!

[NepipenkoIgor]

@em-gei Yes, we will do this asap

[em-gei]

Awesome! Thanks a lot, i'll wait it!

[em-gei]

Cheers mate!!!

[NepipenkoIgor]

@em-gei Please try latest version . Your case [dropSpecialCharacters]="['.']" mask="000.000,00"

[em-gei]

Sorry @NepipenkoIgor i've problems during the server start:

ERROR in ./~/ngx-mask/esm5/ngx-mask.js
Module not found: Error: Can't resolve 'rxjs/operators' in 'D:\Users......\node_modules\ngx-mask\esm5'
@ ./~/ngx-mask/esm5/ngx-mask.js 4:0-38
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

I'd like generalize the mask so i'll be able to insert in the input
currency values as (123.345,78 or 12 or 15.768 or 18.142.654,9)...you know
what i mean?

[em-gei]

@NepipenkoIgor i fixed previous problem removing the 's' from the ngx-mask.js import, i think you should import:

import { take } from 'rxjs/operator';

Anyway, now i can start the local server but i've error in browser console:

compiler.es5.js:1689 Uncaught Error: Can't resolve all parameters for MaskService: (?, [object Object], [object Object], [object Object]).
at syntaxError (compiler.es5.js:1689)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15756)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15624)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:15610)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (compiler.es5.js:15901)
at compiler.es5.js:15830
at Array.forEach ()
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:15790)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15206)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.es5.js:15083)

Any help?

[NepipenkoIgor]

@em-gei Сould you provide your package.json ?

[em-gei]

@NepipenkoIgor

{
"name": "ubz",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start-local": "ng serve --proxy-config proxy.conf.local.json --base-href /",
"start-local2": "ng serve --port 4201 --proxy-config proxy.conf.local.json --base-href /",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build-test": "ng build --output-path=../webapp/UBZ/",
"build-prod": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng build --output-path=../webapp/UBZ/ --prod --env=prod --aot",
"build-prod-j": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng build --prod --env=prod --aot"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"@ngui/datetime-picker": "^0.16.2",
"@ngx-translate/core": "^6.0.0",
"@ngx-translate/http-loader": "^0.0.3",
"@types/file-saver": "0.0.0",
"@types/node": "^6.0.78",
"angular-svg-round-progressbar": "^1.1.0",
"angular2-text-mask": "^8.0.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"ng2-currency-mask": "^4.3.4",
"ng2-dragula": "^1.5.0",
"ng2-toastr": "^4.1.2",
"ngx-bootstrap": "^1.7.1",
"ngx-cookie": "^1.0.0",
"ngx-mask": "^2.6.3",
"ngx-slick": "^0.1.1",
"rxjs": "^5.4.1",
"slick-carousel": "^1.6.0",
"text-mask-addons": "^3.7.2",
"zone.js": "^0.8.12"
},
"devDependencies": {
"@angular/cli": "^1.1.3",
"@angular/compiler-cli": "^4.2.4",
"@types/jasmine": "2.5.38",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.1.2",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "^2.4.0"
}
}

[NepipenkoIgor]

@em-gei And also webpack сonfig. I used angular-cli

[em-gei]

@NepipenkoIgor do you mean the package.json of webpack?

[NepipenkoIgor]

@em-gei which tool do you use for bundling ??

[em-gei]

@NepipenkoIgor i'm using angular-cli too, (clearly webpack is inside, angular version 4)

[NepipenkoIgor]

@em-gei Could you use Angular 5 ? Because i compiled library with compiler v5

[em-gei]

@NepipenkoIgor Actually nope...is there any workaround to let mask work with 4 versions?

[NepipenkoIgor]

@em-gei I will try investigate

[kaburkett]

We faced this issue with ngx-mask when we upgraded to Angular 6. We were using version 2.3 or 2.4... we just ran:

npm update ngx-mask

to get 2.7.3, and it fixed the 'cannot resolve operators' error. I recommend just trying to update your ngx-mask version if you have a similar error in Angular 6

[NepipenkoIgor]

@em-gei we should use v6 compiler and you will need update you stack to v6