Ionic 3.7.1 and angular2-text-mask

[tattivitorino]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

"Can't bind to 'textMask' since it isn't a known property of 'ion-input'."

Expected behavior:

ion-input accept text-mask as a property as it used to.

Steps to reproduce:

npm i angular2-text-mask --save

app.module.ts
import { TextMaskModule } from 'angular2-text-mask';
@NgModule({
imports: [
FormsModule,
TextMaskModule
],
declarations: []
})
in my component
login.ts
<input [textMask]="{mask: mask}" [(ngModel)]="myModel" type="text"/>

Other information:

Here https://github.com/text-mask/text-mask/tree/master/angular2#readme they say:

Ionic 2 - Unfortunately, we are unable to support Ionic 2 ion-input at this point as it overrides the ControlValueAccessor that Text Mask requires to perform its job.

is there a way to revert / fix this? As far as i know this is the only text-mask available, if not and somebody knows any other solution / plugin please let me know!

Any help will be very much appreciated!!

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.1

local packages:

    @ionic/app-scripts : 3.0.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v6.5.0
    npm  : 3.10.3 
    OS   : OS X El Capitan

[Sampath-Lokuge]

Here is the workaround where I have put on StackOverflow: https://goo.gl/D9GxUX

[tattivitorino]

@Sampath-Lokuge thanks for replying! but it doesnt work! the same error still occurs!

I removed angular-text-mask from node_modules, npm installed as you said, changed the package.json and ran ionic serve

here's my package.json
"dependencies": {
"angular/common": "4.4.3",
"angular/compiler": "4.4.3",
"angular/compiler-cli": "4.4.3",
"angular/core": "4.4.3",
"angular/forms": "4.4.3",
"angular/http": "4.4.3",
"angular/platform-browser": "4.4.3",
"angular/platform-browser-dynamic": "4.4.3",
"ionic-native/core": "^4.3.0",
"ionic-native/device": "^4.3.2",
"ionic-native/network": "^4.3.2",
"ionic-native/splash-screen": "4.3.0",
"ionic-native/status-bar": "4.3.0",
"ionic/storage": "2.0.1",
"angular2-text-mask": "8.0.2",
"font-awesome": "^4.7.0",
"fontawesome": "^4.7.2",
"ionic-angular": "3.7.1",
"ionicons": "3.0.0",
"js-sha1": "^0.4.1",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"ionic/app-scripts": "3.0.0",
"typescript": "2.3.4"
}

the thing is.. this version of text-mask has these devDependencies:
"devDependencies": {
"angular/common": "^2.1.2",
"angular/compiler": "^2.1.2",
"angular/compiler-cli": "^2.1.2",
"angular/core": "^2.1.2",
"angular/forms": "^2.1.2",
"angular/http": "^2.1.2",
"angular/platform-browser": "^2.1.2",
"angular/platform-browser-dynamic": "^2.1.2",
"angular/platform-server": "^2.1.2",
"types/core-js": "^0.9.34",
"types/jasmine": "^2.5.52",
"types/node": "^6.0.45",
"awesome-typescript-loader": "^1.0.0",
"concurrently": "^3.0.0",
"core-js": "^2.4.1",
"jasmine-core": "^2.6.4",
"karma": "^1.7.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-typescript": "^3.0.4",
"lite-server": "^2.2.2",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.1",
"systemjs": "0.19.39",
"ts-node": "~1.2.0",
"tslint": "^3.13.0",
"typescript": "^2.0.6",
"zone.js": "^0.7.2"
}

and my project is updated for the latest Ionic!

[Sampath-Lokuge]

It is sad :( I'm still using "ionic-angular": "3.6.0", with "@angular/core": "4.1.3",. But I'll convert my app to the latest version within tomorrow. After that, I'll update here and StackOverflow.

[tattivitorino]

yup! if you update to the latest version you'll probably end up with the same issue! My other project with "ionic-angular": "3.5.3" and "@angular/core": "4.1.3", is perfect!! :( what can we expect from this? I found this: https://www.npmjs.com/package/ionic3-input-mask but it doesnt work either!!

[Sampath-Lokuge]

Did you import the textMask module into your module?

[tattivitorino]

you mean with the ionic3-..?

[Sampath-Lokuge]

See this: text-mask/text-mask#579

[tattivitorino]

I did.. exactly like my previous project.. but in the text-mask docs they say they dont support the ion-input Ionic 2:

Here https://github.com/text-mask/text-mask/tree/master/angular2#readme they say:

Ionic 2 - Unfortunately, we are unable to support Ionic 2 ion-input at this point as it overrides the ControlValueAccessor that Text Mask requires to perform its job.

[Sampath-Lokuge]

But here it says something different no? text-mask/text-mask#246

[tattivitorino]

something changed in these last updates on Ionic Input, dont know exactly what!

[tattivitorino]

Thats exactly what was happening before.. it seems like they fixed, but now we're back with the same issue!!!!

[Sampath-Lokuge]

Yes, You're right. Maybe Ionic team again uses CVA over every input on the latest version. Which is very bad :( We must need a solution for this.

[tattivitorino]

hopefully someone like @jgw96 could give us a help!!

[Sampath-Lokuge]

Any good news about this? @tattivitorino

[tattivitorino]

@Sampath-Lokuge nothing yet!!!! :(

[Sampath-Lokuge]

Hmmm.... :( @tattivitorino

[rfoel]

I'm using ionic-angular 3.6.1 and angular2-text-mask 8.0.1 and it's working just fine. This version of the angular2-text-mask is the latest one that works with Ionic.

[tattivitorino]

@rfoel I think the problem is the latest version of Ionic.. my previous project with "ionic-angular": "3.5.3", and "angular2-text-mask": "^8.0.2", works perfectly

[rfoel]

I don't know about that. As long as I use the 8.0.1 version and import the TextMaskModule in my component's module it works.

[tattivitorino]

@rfoel, have you tried the Ionic 3.7.1 with the text mask? it doen't work! and if you check on the text mask issues it happened before, later the Ionic team fixed the problem but now it's back again

[rfoel]

@tattivitorino I did not try because the ionic 3.7.1 has some unsolved issues, see #13028

[tattivitorino]

yes, @rfoel it seems like the 3.7.1 has lots of bugs to be fixed! :( maybe it is a case of downgrading ionic i think! is there a way to downgrade just ionic-angular? for instance: changing package.json entry to "ionic-angular": "3.6.xx", removing the dir from node_modules and running npm install again?

[rfoel]

@tattivitorino Yes, you can downgrade Ionic to 3.6.1. NPM will complain about the @angular packages too, I use the 4.1.3 version for them.

[Sampath-Lokuge]

Can I use Ionic Pro without any issue if I use Ionic 3.6.1 with @ionic/app-scripts": "2.1.4"? @rfoel

[tattivitorino]

@rfoel is there a way to specific target one version of ionic when running ionic start ... ? for instance: i'd like to use 3.6.1 as you sugested but ionic start will only give me 3.7.1

[Sampath-Lokuge]

You can't. See : http://ionicframework.com/docs/cli/start/

[tattivitorino]

@Sampath-Lokuge thats what i thought! :(

[rfoel]

@tattivitorino You can't. But once you downgrade a package version, NPM will display warns about other package versions.

[rfoel]

@Sampath-Lokuge I don't see a problem there. Ionic Pro is just a set of services.

[Sampath-Lokuge]

True. But it heavily depends on the @ionic/app-scripts" version. They have fixed many issues after the 2.1.4. That is my doubt here. @rfoel

[kensodemann]

I’ll attempt to address some of your issues later today. In the meantime some of this discussion should probably be moved to a more appropriate forum such as our slack channel. I can get you a link to that later as well. Not near my computer right now.

[tattivitorino]

tks a lot @kensodemann

[Sampath-Lokuge]

Thanks @kensodemann

If you can give us a solution for this Ionic 3.7.1 and angular2-text-mask, we highly appreciate it. I cannot use Ionic Pro due to this issue. Because angular2-text-mask is not working with 3.7.1. please provide a solution for this. Thanks.

[kensodemann]

So there are serval issues that seem to be coming up here. Let me see if I can address them:

• Yes, our inputs all extend ControlValueAccessor, but they did at least as far back as v3.5.0, perhaps earlier
• Yes, you can use ionic-angular 3.6.1 with Ionic Pro. I just tried it and it built just fine. I used
• Someone at some point asked: "is there a way to specifically target one version of ionic when running ionic start" - no, you change the version just like you would the version of any dependency - via the package.json
• If this worked with v3.6.1 but not with v3.7.1 then we will need a sample application shared via GitHub that demonstrates the issue so we can try to use it for debugging, fixing, and testing

[tattivitorino]

@kensodemann, tks so much for replying!
well i have an app build with "ionic-angular": "3.5.3", and "angular2-text-mask": "^8.0.2", working perfectly!
but the last one I created yesterday with: "ionic-angular": "3.7.1", is the problem! I'll try to create an app with ionic 3.6.1 and the text mask, plus the 3.7.1 and upload them to git

[tattivitorino]

@Sampath-Lokuge can you share here your package.json for the 3.6.1 app so i can check the right dependencies?

[Sampath-Lokuge]

This is the Package.json where I'm using and I don't have any issue with angular2-text-mask.

@tattivitorino Can you please provide the 3.7.1 GIT repo to @kensodemann

{
    "name": "MyTracker",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "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",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "angular2-text-mask": "8.0.2",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-sqlite-storage": "^2.0.4",
        "highcharts-more": "^0.1.2",
        "highcharts-solid-gauge": "^0.1.2",
        "ionic-angular": "3.6.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "moment": "^2.18.1",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "text-mask-addons": "^3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.4",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-sqlite-storage": {}
        },
        "platforms": [
            "android"
        ]
    }
}

[Sampath-Lokuge]

@tattivitorino You don't need to create 3.6.1 repo since no issues with it. You just need to give 3.7.1 repo to @kensodemann

[tattivitorino]

ok!!! no problem! i just want to test here the 3.6.0 (actually) version

[Sampath-Lokuge]

Any progress of 3.7.1 repo? @tattivitorino

[tattivitorino]

@Sampath-Lokuge I dont want to get ahead of myself but after creating a new blank proj with the ionic 3.7.1 and the text-mask 8.0.2 the mask worked, but there's a new issue.. its not masking properly.. it is appending one character at the end after we blur the input!! and i've seen someone mentioning this behavior before... let me investigate a bit more.. let you know soon enough..

[Sampath-Lokuge]

According to the Yes, our inputs all extend ControlValueAccessor, but they did at least as far back as v3.5.0, perhaps earlier, it should work. The character issue was there in earlier versions too. Personally, it is not an issue for my app. I think it is an angular2-text-mask issue.

Can you test the latest version of angular2-text-mask instead of 8.0.2? @tattivitorino

[tattivitorino]

i never had any of these issues before.. but yes it could be a text-mask issue! i'll test with the latest!

[tattivitorino]

oh, could this have anything to do with lazy loading the page where i'm using the mask? because i'm importing the TextMaskModule (as before) in the app.component.ts

[Sampath-Lokuge]

No. You have done it on root module no? app.module.ts @tattivitorino
Now no issues for you. Hope you can close this issue then?

[tattivitorino]

Exactly, @Sampath-Lokuge, i was importing into the root module, but thats the point! You need to import the TextMaskModule into the Page Module, not the APP Module as it was before!!!
I just tested! and to get rid of the appending character you need to set maxlength to the input itself

[Sampath-Lokuge]

It can't be. Is that not working when you put that on app.module.ts? @tattivitorino

[tattivitorino]

trust me, it is! if you import the textmask module into the root module you wont be able to use it if your pages are lazy loaded.. with the page module!!!

[Sampath-Lokuge]

Oh.. Good to know about it. Is that working with latest angular2-text-mask? No character issue now or? @tattivitorino

[tattivitorino]

i will test with the latest! but as i said you need to set maxlength on the input in order to get rid of the appending character on blur!!! it happens when you keep typing and blur the input..

[Sampath-Lokuge]

Nice. Thanks 👍 @tattivitorino

[tattivitorino]

@Sampath-Lokuge the latest version doesn't work! it doesn't throw any errors but it doesn't mask the input content! so we need to stick with the 8.0.2 version! import it separately into the Pages Modules (which i think is not a good practice according to the angular's docs) and set the maxlength on the inputs!

hard uh!!! but at least we found a workaround!!!! do you mind sharing this on their Git?

Cheers

[Sampath-Lokuge]

Yes.Great. I have updated the StackOverflow post: https://stackoverflow.com/a/46435659/1077309 @tattivitorino

Hope you can close this issue here now.

[tattivitorino]

ok @Sampath-Lokuge here's a good thing:

shared.module.ts

`
import { NgModule } from '@angular/core';

import {ConnFormatPipe} from './pipes/conn-format.pipe';
import {DateFormatPipe} from './pipes/date-format.pipe';
import {InputFormatPipe} from './pipes/input-format.pipe';
import {MeasureUnitPipe} from './pipes/measure-unit.pipe';

import {ImgPreloadDirective} from './directives/img-preload.directive';
import {InputFormatDirective} from './directives/input-format.directive';
import {EqualValidatorDirective} from './directives/equal-validator.directive';

import {TextMaskModule} from 'angular2-text-mask';

@NgModule({
declarations: [
ConnFormatPipe, DateFormatPipe, InputFormatPipe, MeasureUnitPipe,
ImgPreloadDirective, InputFormatDirective, EqualValidatorDirective
],
imports: [TextMaskModule],
exports: [
ConnFormatPipe, DateFormatPipe, InputFormatPipe, MeasureUnitPipe,
ImgPreloadDirective, InputFormatDirective, EqualValidatorDirective, TextMaskModule
]
})
export class SharedModule {}
`

your page's module
test.module.ts
`
mport { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TestPage } from './test';

import {SharedModule} from '../../shared/shared.module';

@NgModule({
declarations: [
TestPage,
],
imports: [
IonicPageModule.forChild(TestPage),
SharedModule
],
})
export class TestPageModule {}
`
this way works perfectly and you import the mask module only once!!

cheers!!

[kensodemann]

Since this appears to be resolved, but is kind of hard to follow, I am going to close this issue and lock the conversation. If either of you still have an issue related to this, please create a new issue with sample code in a GitHub repo for us to look at.