peterstaev / nativescript-masked-text-field Goto Github PK

:hash: A NativeScript Masked Text Field widget

License: Apache License 2.0

JavaScript 38.68% TypeScript 59.29% HTML 0.72% CSS 1.31%

nativescript mask maskedinput maskedtextfield ui widget android ios tangra

nativescript-masked-text-field's Introduction

This repo only supports NativeScript pre-6.0. The latest version of the plugin supporting NS 6+ is availble as part of ProPlugins.

NativeScript Masked Text Field widget

A NativeScript Masked Text Field widget. The widget extends the default NativeScript TextField widget and adds ability to define masks for the input.

Screenshot

Installation

Run the following command from the root of your project:

tns plugin add nativescript-masked-text-field

This command automatically installs the necessary files, as well as stores nativescript-masked-text-field as a dependency in your project's package.json file.

Configuration

There is no additional configuration needed!

API

NOTE: Since the widget extends the default TextFeild NatvieScript widget it has all the properties/events/methods of the TextField widget. The below-mentioned properties are in addition to the TextField ones

Instance Properties

mask - string
Gets or sets the mask for the text field. Possible tokens in the mask:
- 0 - Digit
- 9 - Digit or space
- # - Digit or + or -
- L - ASCII Letter
- ? - ASCII Letter or space
- & - Non-whitepsace character
- C - Any charcter
- A - ASCII Letter or digit
- a - ASCII Letter or digit or space
If you want to escape any token character you can use \ (for example \9)

Usage

You need to add xmlns:mtf="nativescript-masked-text-field" to your page tag, and then simply use <mtf:MaskedTextField/> in order to add the widget to your page.

<!-- test-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:mtf="nativescript-masked-text-field">
    <StackLayout>
        <mtf:MaskedTextField text="{{ value }}" mask="(999) 999-9999" keyboardType="phone"/>
    </StackLayout>
</Page>

Usage in Angular

In order to be able to use the widget you just need to import MaskedTextFieldModule in NgModule:

import { MaskedTextFieldModule } from "nativescript-masked-text-field/angular";
// ......
@NgModule({
    // ......
    imports: [
        // ......
        MaskedTextFieldModule,
        // ......
    ],
    // ......
})

Example Usage

// main.ts
import { NgModule } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { MaskedTextFieldModule } from "nativescript-masked-text-field/angular";
import { AppComponent } from "./app.component";

@NgModule({
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    imports:      [
        NativeScriptModule,
        MaskedTextFieldModule,
    ],
})
class AppComponentModule {
}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

<!-- app.component.html -->
<StackLayout>
    <MaskedTextField class="input input-border" mask="(999) 999-9999" [(ngModel)]="value" keyboardType="phone"></MaskedTextField>
</StackLayout>

// app.component.ts
import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl:"app.component.html",
})
export class AppComponent {
    public value = "";
}

Demos

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

$ git clone https://github.com/peterstaev/nativescript-masked-text-field
$ cd nativescript-masked-text-field
$ npm install
$ npm run demo-ios

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

Donate

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

nativescript-masked-text-field's People

Contributors

Stargazers

Watchers

nativescript-masked-text-field's Issues

Issue with nativescript-angular 3.1?

Hello,

I've recently migrated my project to nativescript-angular 3.1. I've observed that angular integration is not working anymore. Here is my MaskedTextField:

My component does't receive the field value anymore.
Would anybody have any advice?
Thanks in advance.

Reactive form validation with mask

Hi,

I want to validate the value with 10 digit phone number with reactive form .but component returning the value with masked text like (123) 456-1555. my regex on validation is '/^\d{10}'. is there any way to validate this one.

Getting error using it in Angular with NativeScript 3.2.1

Hello, I'm trying to use your plugin and I've followed the instructions but it is not working. It shows me the error:

No value accessor for form control with unspecified name attribute.

What can I possible doing wrong?

webpack issue

Hi,
I use nativescript-masked-text-field in my app. I need also use webpack to minify the app.

When I use this:
var maskedTextFieldMangleExcludes = require("nativescript-maskedTextField/uglify-mangle-excludes").default;

The error below occurs. Do you know where can be a problem?
Thank you

module.js:487
    throw err;
    ^

Error: Cannot find module 'nativescript-maskedTextField/uglify-mangle-excludes'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/alpiq/Desktop/restore/app4lead/trunk/Alpiq.App4lead.Mobile/webpack.config.js:12:37)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)

Ivy compiler issues

I was trying to use this plugin with NS7 and angular 10, i was able to install every other dependency but this one.

Looks like everything works if we do not use Angular Ivy compiler

I've created ngcc.config.ts

module.exports = {
    "packages": {
        "nativescript-masked-text-field": {
            entryPoints: {
                "angular": {
                    override: {
                        main: "./index.js",
                        typings: "./index.d.ts",
                    },
                    ignoreMissingDependencies: true,
                }
            },
            ignorableDeepImportMatchers: [
                /tns-core-modules\//,
                /@nativescript\/core\//,
                /@nativescript\/angular\//,
                /nativescript-angular\//,
                /nativescript-angular\/forms\//,
                /@angular\/core\//,
                /@angular\/forms\//,
            ]
        }
    }
}

Add added a post-install script in package.json
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"

ERROR

ERROR in node_modules/nativescript-masked-text-field/angular/index.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of ClaimsModule, but could not be resolved to an NgModule class.

This likely means that the library (nativescript-masked-text-field/angular) which declares MaskedTextFieldModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class MaskedTextFieldModule

But still cannot make it work. Do you have any plans to update this plugin to work with NS7 and Angular9+

NOTE: i cannot use @proplugins/nativescript-masked-text-field 'cause requries a subscription that my team cannot use or do right now.

Error Mask with Nativescript 5.0.0

How are you, thanks for the plugin. When I upgrade to version 5.0.0 the plugin stopped working.

Esenario:

My mask is 99/99 and I write in the specific input but the plugin collects me the following:

Error:

12/22_

Expected

12/22

The error is that I'm adding another script _

NOTE: In ios not work...

Usage with NativeScript-Vue

I'm new to NativeScript and I'm starting with Vue, how do I use it with NativeScript-Vue?

I tested like this, but got no result

<template>
  <Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:mtf="nativescript-masked-text-field">
    <mtf:MaskedTextField v-model="cpf" />
  </Page>
</template>

Nativescript Angular: Cant use (focus) on IOS

Hey Guys,

I am trying to use the (focus) functionality of textfield on the MaskedTextField component. This works for android but not for IOS. We are still on nativescript 3.4 and maybe this is fixed in the new version of maskedTextField, im not sure. But for us its still broken.

Hope you guys van help us out with this.

Kind regards,
BT

[Build Error] Module not found: Can't resolve

There are three different directories that are not being resolved in masked-text-field-common.js

ERROR in ./node_modules/nativescript-masked-text-field/masked-text-field-common.js 6:13-36
Module not found: Error: Can't resolve 'ui/core/view' in '/Users/jwhitley/myhighland-app/node_modules/nativescript-masked-text-field'
 @ ./node_modules/nativescript-masked-text-field/masked-text-field.ios.js 7:33-70 8:9-46
 @ ./src/main.js 10:10-67

ERROR in ./node_modules/nativescript-masked-text-field/masked-text-field-common.js 7:19-43
Module not found: Error: Can't resolve 'ui/text-field' in '/Users/jwhitley/myhighland-app/node_modules/nativescript-masked-text-field'
 @ ./node_modules/nativescript-masked-text-field/masked-text-field.ios.js 7:33-70 8:9-46
 @ ./src/main.js 10:10-67

ERROR in ./node_modules/nativescript-masked-text-field/masked-text-field.ios.js 6:18-41
Module not found: Error: Can't resolve 'ui/text-base' in '/Users/jwhitley/myhighland-app/node_modules/nativescript-masked-text-field'
 @ ./src/main.js 10:10-67

Usage:

<template>
    <Page>
        <MaskedTextField :text="formData.phone" @textChange="" mask="999.999.999-99" keyboardType="phone"/>
    </Page>
</template>

<script>
import MaskedTextField from 'nativescript-masked-text-field';

export default {
    components: {MaskedTextField}
}

Cannot change mask dynamically in Android

Hello, i'm trying to change the mask of a phone input using this library, the idea is use a component that changes the country, with that country i get the countryCode ('US', 'CO', etc) and use libphonenumber-js for create a phone mask, at this point everything is fine but when i use a directive which is applied to the MaskedTextField for change the mask property against a country the text field behavior is wrong, with random number position, some "(" are changed by numbers when start to typing, the field becomes cyclic (you start to typing and reaching to the end the caret moves to the begining and so on); i tested it in Android, this is my directive code for reference:

import { Directive, Input, ViewChild, ElementRef } from '@angular/core';
import { Country } from '~/modules/core/vos/country.vo';
import { MaskedTextField } from 'nativescript-masked-text-field/masked-text-field'
import { AsYouType, CountryCode } from 'libphonenumber-js'
import * as phoneNumber from 'libphonenumber-js/examples.mobile.json'

@Directive({
  selector: '[countryPhoneMask]'
})
export class CountryPhoneMaskDirective {

  private _countryPhoneMask: Country

  public maskedTextField: MaskedTextField

  @Input()
  set countryPhoneMask(country: Country) {
    this._countryPhoneMask = country

    if (country) {
      const countryCode = country.countryCode as CountryCode
      const mask = new AsYouType(countryCode).input(phoneNumber[country.countryCode].replace(/[0-9]/g, '9'))
      console.log('NEW PHONE MASK',countryCode, mask)
      this.maskedTextField.mask = mask
    }
  }

  get countryPhoneMask() {
    return this._countryPhoneMask
  }

  constructor(private elRef: ElementRef) {
    this.maskedTextField = elRef.nativeElement
  }

}

Then in a template:

<MaskedTextField #cellPhoneField="ngModel" id="cell-phone-text" hint="{{'auth.additional-sign-up.cellphone-hint' | L}}"
            [(ngModel)]="user.cellPhone" keyboardType="phone" [countryPhoneMask]="user.country" required></MaskedTextField>

How i can change the mask dinamically?, it's possible with this plugin?

Ability to define currency mask

Hi,

I try to find a solution for add a currency mask :

5€
5,2$
10€
10.55€

Like you see the mask should be variable, i try to binding data to the mask but i got this error

<mtf:MaskedTextField text="{{ price }}" hint="{{ L('price_ex') }}" id="priceInput" mask="{{ mask }}" keyboardType="phone" />

JS: Binding: Binding error while setting property price of [object Object]: TypeError: Cannot assign to read only property 'length' of string '0'

Do you think we can imagine to add a real regex into a mask like : ^[\d]+(\,|\.)?[\d]{0,2}$

Thanks

ngModel doesn't work on both platforms

Hi @PeterStaev

I tried your examples in my app but I realised that the variable I added in [(ngModel)] is always null or empty, depends on init value.

component.html

<MaskedTextField class="input-code" [(ngModel)]="code"  keyboardType="phone" mask="0-0-0-0-0" returnKeyType="next" (returnPress)="continue()"></MaskedTextField>

nativescript : 3.3.1
tns-android : 3.3.1
tns-ios : 3.3.0

Let me know if you need more info about my app & test case.

Regex as Mask

I think it's a good idea to let the user set regex as mask. This way, the masked text field will be more generic and it can handle more use cases.

AOT build nativescript angular 2 issue

We are facing below issue:

Environment: Nativescript 3.0, Angular 4

ERROR in Error encountered resolving symbol values statically. Reference to a non-exported class MaskedTextValueAccessor. Consider exporting the class (position 21:1 in the original .ts file), resolving symbol MaskedTextFieldModule in /Users/Jey/Desktop/suresh/perf/build18Jul/MyBlue2/node_modules/nativescript-masked-text-field/angular/index.d.ts

Kindly help

Mask with placeholders doesn't show in iOS

Hi @PeterStaev,

I use your plugin but I found something that bothers me. In Android, the mask shows and it looks exactly like in mask property but in iOS, it looks like a blank TextField and when I click on TextField it appears.

Can you help me, please?

Cannot use in NS Forms 3.4.0

I've tried to upgrade your plugin to 2.0.0, after upgrading the NS to 3.4.0.
It shows this error on app.module.ts:

Type TextValueAccessor is part of the declarations of 2 modules: NativeScriptFormsModule and MaskedTextFieldModule! Please consider moving TextValueAccessor to a higher module that imports NativeScriptFormsModule and MaskedTextFieldModule. You can also create a new NgModule that exports and includes TextValueAccessor then import that NgModule in NativeScriptFormsModule and MaskedTextFieldModule.

Does you have any tips for using the new version with NativesScript 3.4 ?

Thank's

Add ability to specify the placeholder characters

The cursor is positioned at the end of the field

When I run demo-ng, the cursor is positioned at the end of the field.

So I can not write anything

Nativescript 3.2.0 compilation error

When compiling the module throws an error, appears to be unable to find the TextValueAccessor class to extend.

node_modules/nativescript-masked-text-field/angular/index.d.ts(1,10): error TS2305: Module '"/nativescript-app/node_modules/nativescript-angular/index"' has no exported member 'TextValueAccessor'.

Vuejs instructions?

could you please also add vuejs instructions to the README.md?

[FR] make this an extension any class extending TextField

I am developing a material components plugin, and one of my components is a textfield. Would love to be able to use your plugin!

One solution would to make your plugin an "extension" to be applied on an existing class.
Pretty easy to do with NS 5.0, we refactored it just for that!

Let me know if you are interested. I can make another plugin doing that or help you rewrite your plugin

Error on run IOS demo-ng

When I run:

tns run ios

On /nativescript-masked-text-field/demo-ng
I get this error:

Unable to install dependencies. Make sure your package.json is valid and all dependencies are correct. Error is: Command npm failed with exit code 254

Getting 404 when trying to add plugin from ProPlugin

Hi,
i am trying to run given command on https://npm.proplugins.org/-/web/detail/@proplugins/nativescript-masked-text-field
and i am getting 404.
can you please guide me if i'm doing anything wrong thank you so much :)

Add ability to define custom rules

Trailing mask character with Angular

Peter-

I am experiencing a couple of problems with the Masked Text Box. First,
my form values have a trailing underscore "_". For example, if I have a
telephone number mask, it will look like "(212) 555-5555_" when I
retrieve the value.

The second thing is odder. When I have a blank field, when pushing a
couple of keys I have sometimes ended up with the textbox mask
disappearing and in its place is the word "false". It's happened a
couple of times, but I just tried to recreate the steps and I couldn't.
I'm not sure exactly which keys I'm pressing, but I think it is some
combination of the arrow keys or the backspace.

I'm using the Angular version.

Thanks in advance,
Mark

It doesn't work with keyboardType "number"

I'm trying to use MaskedTextField with keyboardType "number" and mask "999.999.999-99", but it doesn't work.
It works if I use other mask like this "(999) 999999" or keyboardType "phone"

The raw value displays a trailing _

Hello Peter,

After switching to NS 6.0 I started experiencing an issue with the plugin. When the user enters the information in the text box, the value still contains an extra _ (underscore) character.

Here is a playground link to demonstrate the issue:

https://play.nativescript.org/?template=play-tsc&id=Sv3mjI

Thank you for your help.

NativeScript 6.2.0 compilation error

After NativeScript&nativescript-angular update I can't compile project, error thrown:

Module not found: Error: Can't resolve 'nativescript-angular/forms/value-accessors/text-value-accessor' in '.../node_modules/nativescript-masked-text-field/angular'
 @ ../node_modules/nativescript-masked-text-field/angular/masked-text-value-accessor.js 5:28-101
 @ ../node_modules/nativescript-masked-text-field/angular/index.js
 @ ./app/app.module.ts
 @ ./main.ts

package.json

{
  "scripts": {
    "lint": "eslint '*/**/*.+(js|ts)'"
  },
  "nativescript": {
    "id": "com.....app",
    "android": {
      "v8Flags": "--expose_gc",
      "markingMode": "none"
    },
    "tns-android": {
      "version": "6.2.0"
    },
    "tns-ios": {
      "version": "6.2.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/common": "^8.2.13",
    "@angular/compiler": "^8.2.13",
    "@angular/core": "^8.2.13",
    "@angular/forms": "^8.2.13",
    "@angular/http": "^8.0.0-beta.10",
    "@angular/platform-browser": "^8.2.13",
    "@angular/platform-browser-dynamic": "^8.2.13",
    "@angular/router": "^8.2.13",
    "@auth0/angular-jwt": "^3.0.1",
    "@ngrx/effects": "^8.4.0",
    "@ngrx/store": "^8.4.0",
    "nativescript-angular": "^8.20.0",
    "nativescript-barcodescanner": "^3.4.0",
    "nativescript-carousel": "^6.1.1",
    "nativescript-masked-text-field": "^4.0.3",
    "nativescript-sound": "^1.0.4",
    "nativescript-toasty": "^2.0.1",
    "nativescript-ui-listview": "^8.0.0",
    "nativescript-urlhandler": "^1.3.0",
    "nativescript-vibrate": "^2.1.3",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^6.5.3",
    "tns-core-modules": "^6.2.0",
    "tns-platform-declarations": "^6.2.0",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^8.2.13",
    "@nativescript/schematics": "^0.7.3",
    "@ngtools/webpack": "^8.3.17",
    "@typescript-eslint/eslint-plugin": "^2.6.1",
    "@typescript-eslint/parser": "^2.6.1",
    "eslint": "^6.6.0",
    "husky": "^3.0.9",
    "lint-staged": "^9.4.2",
    "nativescript-dev-webpack": "^1.3.0",
    "typescript": "~3.5.3"
  },
  "gitHead": "c06800e52ee1a184ea2dffd12a6702aaa43be4e3",
  "readme": "NativeScript Application",
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.+(js|ts)": [
      "eslint --quiet"
    ]
  },
  "eslintIgnore": [
    "**/node_modules/**",
    "**/dist/**",
    "src/assets/**",
    "platforms/**",
    "hooks/**",
    "webpack.config.js"
  ]
}

Text Masking support in NativeScript Angular

Hi, I'm looking to create an SSN masking for text field using asterisk * (or) hash #. For example, I want to mask my ssn text field as --** or ###-##-####.

I haven't found any sample in the documentation https://github.com/PeterStaev/nativescript-masked-text-field . Could you please provide me this add on feature to generate a text masking for ssn using * or #.

I have posted this issue in NativeScript group too. Please refer to the following URL.
NativeScript/nativescript-angular#1877

Strange behavior in Android

Hi,

After updating my project to NativeScript 6 and Angular 8, the plugin behaves in an unexpected way on Android with the setup of mask="99/99" in the MaskedTextField element to represent expiration date in MM/YY format. When I entered a date, an additional underscore is added to the value of the input field, causing the input to have an invalid value. When a "maxLength" property is provided, the masked input will stop accepting input altogether after the first digit is entered. However, the exact setup works fine on iOS.

Please refer to the screenshot below for the symptom described above:

Since the input mask feature depends on the plugin, any help is highly appreciated. Thanks in advance.

Support for hint

Is it possible to add support for hint text and only apply mask when something is typed?

Dont works with ReactForms

i'm try use this plugin with reactforms but no success. I receive the error

ERROR Error: No value accessor for form control with name: 'cpf'

Has some chance to use this with formControl,formGroup?

Quantifier support

Is there a way to specify quantity of mask characters like '9*' for '0 or more digits'?
I'm trying to specify an email mask.

Thanks.

TypeError: Could not load view for: MaskedTextField.TypeError: undefined is not a constructor

I'm very interested in this solution, because nativescript-maskedinput does not allow me to compile with AoT Webpack.

When I run, I get this error:

CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1091:24: ERROR Error: Uncaught (in promise): TypeError: Could not load view for: MaskedTextField.TypeError: undefined is not a constructor (evaluating 'new view_1.Property')
	getViewClass@file:///app/tns_modules/nativescript-angular/element-registry.js:28:28
	createView@file:///app/tns_modules/nativescript-angular/view-util.js:121:56
	createElement@file:///app/tns_modules/nativescript-angular/renderer.js:103:40
	createElement@file:///app/tns_modules/nativescript-angular/renderer.js:205:55
	createElement@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:13092:62
	createElement@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9328:40
	createViewNodes@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:11942:57
	callViewAction@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12354:28
	execComponentViewsAction@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12293:27
	createViewNodes@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:12011:29
	createRootView@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:11889:20
	callWithDebugContext@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:13020:47
	create@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:9825:60
	createComponent@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:10025:68
	loadWithFactory@file:///app/tns_modules/nativescript-angular/common/detached-loader.js:37:49
	activateOnGoForward@file:///app/tns_modules/nativescript-angular/router/page-router-outlet.js:162:75
	activateWith@file:///app/tns_modules/nativescript-angular/router/page-router-outlet.js:138:37
	placeComponentIntoOutlet@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4515:28
	activateRoutes@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4496:50
	file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4432:72
	forEach@[native code]
	activateChildRoutes@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4432:36
	activate@file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4406:33
	file:///app/tns_modules/@angular/router/./bundles/router.umd.js:4023:30
	file:///app/tns_modules/rxjs/Observable.js:107:25
	__tryOrSetError@file:///app/tns_modules/rxjs/Subscriber.js:243:20
	next@file:///app/tns_modules/rxjs/Subscriber.js:185:42
	_next@file:///app/tns_modules/rxjs/Subscriber.js:125:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_subscribe@file:///app/tns_modules/rxjs/observable/ScalarObservable.js:49:28
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_complete@file:///app/tns_modules/rxjs/operator/reduce.js:119:34
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyComplete@file:///app/tns_modules/rxjs/operator/every.js:53:30
	_complete@file:///app/tns_modules/rxjs/operator/every.js:70:28
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyComplete@file:///app/tns_modules/rxjs/operator/every.js:53:30
	_complete@file:///app/tns_modules/rxjs/operator/every.js:70:28
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_complete@file:///app/tns_modules/rxjs/operator/mergeMap.js:135:38
	complete@file:///app/tns_modules/rxjs/Subscriber.js:114:27
	_subscribe@file:///app/tns_modules/rxjs/observable/ArrayObservable.js:116:32
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_next@file:///app/tns_modules/rxjs/operator/map.js:83:30
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	_subscribe@file:///app/tns_modules/rxjs/observable/ScalarObservable.js:49:28
	_trySubscribe@file:///app/tns_modules/rxjs/Observable.js:57:35
	subscribe@file:///app/tns_modules/rxjs/Observable.js:45:40
	subscribe@file:///app/tns_modules/rxjs/Observable.js:42:26
	_innerSub@file:///app/tns_modules/rxjs/operator/mergeMap.js:130:55
	_tryNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:127:23
	_next@file:///app/tns_modules/rxjs/operator/mergeMap.js:110:26
	next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
	notifyNext@file:///app/tns_modules/rxjs/operator/mergeMap.js:143:34
	_next@file:///app/tns_modules/rxjs/InnerSubscriber.js:23:31

This is my package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "com.dtech.zafongo",
    "tns-ios": {
      "version": "2.5.0"
    },
    "tns-android": {
      "version": "3.0.0-next-2017-03-27-1727"
    }
  },
  "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/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "email-validator": "^1.0.7",
    "moment": "^2.18.1",
    "nativescript-angular": "1.5.1",
    "nativescript-angular-snapshot": "1.5.1-5.5.372.32",
    "nativescript-geolocation": "0.0.19",
    "nativescript-google-maps-sdk": "^1.4.3",
    "nativescript-google-maps-utils": "^0.1.2",
    "nativescript-imagepicker": "^2.5.1",
    "nativescript-iqkeyboardmanager": "^1.0.1",
    "nativescript-masked-text-field": "^1.0.0",
    "nativescript-maskedinput-ng2": "^1.0.6",
    "nativescript-phone": "^1.2.4",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-webview-interface": "^1.4.1",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.2.0",
    "tns-core-modules": "2.5.2",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.0.2",
    "@ngtools/webpack": "1.2.13",
    "babel-traverse": "6.23.1",
    "babel-types": "6.23.0",
    "babylon": "6.16.1",
    "copy-webpack-plugin": "~3.0.1",
    "extract-text-webpack-plugin": "~2.0.0-beta.4",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.3.5",
    "nativescript-dev-webpack": "^0.3.7",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~1.6.0",
    "typescript": "~2.1.0",
    "webpack": "2.2.0",
    "webpack-sources": "~0.1.3"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "start-android-bundle": "npm run ns-bundle --android --start-app",
    "start-ios-bundle": "npm run ns-bundle --ios --start-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

Masking is not working on iOS 16.2 and Nativescript version 8.4.0

When I upgraded the nativescript to version 8.4.0 the plugin stopped working on iOS devices.

onTextChange($event) is not returning updated text.
May be delegate function is not working.

Hint does not show on android when value is null

Hi @PeterStaev
Thanks a lot for your quick answer.
Actually you are right with Ios, but with android I cannot have the hint displayed.
Find the playground test :
https://play.nativescript.org/?template=play-ng&id=Iq91kF

You will see that with android, the hint is not displayed.
What am I doing wrong ?

Thanks again and again.

Nico

Originally posted by @nickykln in #28 (comment)

Validation

Validation with [(ngModel)] doesnt work correctly

Make the masked-text field look like a normal TextField

Is there a way to get rid of the placeholder characters and display the field as a normal TextField like a normal empty rectangle?

No MaskedTextFieldModule found in Angular

Hi there

Is angular/ts fully working, as cannot seem to find MaskedTextFieldModule when imported:

import { MaskedTextFieldModule } from "nativescript-masked-text-field/angular";

"node_modules/nativescript-masked-text-field/masked-text-field"' has no exported member 'MaskedTextFieldModule'."

Any ideas?

Installation causes Android failure

I installed the plugin in my Angular Nativescript app and got the attached errors in Sidekick, and the app would not start. The only way to remove the error was to remove the plugin and delete the Android folder in platforms. Tried a second time with the same result.

Text underline

Is there any way underline of placeholder could be hidden or recoloured?

TypeError: this.mask.split is not a function

I'm using the version for the angular. I followed all the steps that have been described here.

But when my page loads I get the following error:

JS: TypeError: this.mask.split is not a function
JS:     at MaskedTextFieldBase._generateMaskTokens (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/nativescript-masked-text-field/masked-text-field-common.js:48:35)
JS:     at valueChanged (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/nativescript-masked-text-field/masked-text-field-common.js:131:16)
JS:     at MaskedTextField.Property.set [as mask] (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js:82:25)
JS:     at ViewUtil.setPropertyInternal (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/nativescript-angular/view-util.js:192:32)
JS:     at ViewUtil.setProperty (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/nativescript-angular/view-util.js:155:18)
JS:     at EmulatedRenderer.NativeScriptRenderer.setAttribute (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/nativescript-angular/renderer.js:126:30)
JS:     at DebugRenderer2.setAttribute (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:13383:23)
JS:     at createElement (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:9378:22)
JS:     at createViewNodes (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:12051:44)
JS:     at callViewAction (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:12537:13)
JS:     at execComponentViewsAction (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:12446:13)
JS:     at createViewNodes (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:12120:5)
JS:     at createRootView (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:11998:5)
JS:     at callWithDebugContext (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:13213:42)
JS:     at Object.debugCreateRootView [as createRootView] (file:///data/data/org.nativescript.meupatrocinio/files/app/tns_modules/@angular/core/bundles/core.umd.js:12673:12)

The html: <MaskedTextField col="2" class="text-field text-field-bordered" mask="000" keyboardType="number"></MaskedTextField>

Thanks.

There is some config to make it strip the mask off the data?

I want to mask a field that has the format like 999.999.999-99 but i want to get from the text prop the value "cleaned" like 99999999999. There is some configuration that I can make to this? Like the ol' jquery
masked input?

Crash when spamming a masked textfield on Android

On Android, when typing very fast in an already filled masked text input, it makes the app crash. Suppose you have an input like this :

    <MaskedTextField mask="99 99 99 99 99" keyboardType="phone"></MaskedTextField>

If you type in a valid number according to the mask, then try to add more numbers it will automatically delete them. But if you type in two numbers so that they appear in the field at the same before they get deleted it will crash the entire application.

ERROR LOG : 
System.err: com.tns.NativeScriptException: 
System.err: Calling js method run failed
System.err: 
System.err: Error: java.lang.IndexOutOfBoundsException: setSpan (20 ... 20) ends beyond length 19
System.err:     android.text.SpannableStringBuilder.checkRange(SpannableStringBuilder.java:1309)
System.err:     android.text.SpannableStringBuilder.setSpan(SpannableStringBuilder.java:680)
System.err:     android.text.SpannableStringBuilder.setSpan(SpannableStringBuilder.java:672)
System.err:     android.text.Selection.setSelection(Selection.java:76)
System.err:     android.text.Selection.setSelection(Selection.java:87)
System.err:     android.widget.EditText.setSelection(EditText.java:127)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:1083)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1070)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1050)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1042)
System.err:     com.tns.gen.java.lang.Runnable.run(Runnable.java:17)
System.err:     android.os.Handler.handleCallback(Handler.java:789)
System.err:     android.os.Handler.dispatchMessage(Handler.java:98)
System.err:     android.os.Looper.loop(Looper.java:164)
System.err:     android.app.ActivityThread.main(ActivityThread.java:6541)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
System.err: File: "file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js, line: 155, column: 24
System.err: 
System.err: StackTrace: 
System.err: 	Frame: function:'', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-masked-text-field/masked-text-field.js', line: 79, column: 26
System.err: 	Frame: function:'ZoneDelegate.invokeTask', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 421, column: 31
System.err: 	Frame: function:'Zone.runTask', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 188, column: 47
System.err: 	Frame: function:'ZoneTask.invokeTask', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 496, column: 34
System.err: 	Frame: function:'ZoneTask.invoke', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 485, column: 48
System.err: 	Frame: function:'timer', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 1561, column: 29
System.err: 	Frame: function:'invoke', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/tns-core-modules/timer/timer.js', line: 19, column: 48
System.err: 	Frame: function:'ZoneDelegate.invoke', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 388, column: 26
System.err: 	Frame: function:'Zone.runGuarded', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 151, column: 47
System.err: 	Frame: function:'', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 129, column: 29
System.err: 	Frame: function:'run', file:'file:///data/data/fr.makeeatup.makeeatup/files/app/tns_modules/tns-core-modules/timer/timer.js', line: 23, column: 13
System.err: 
System.err: 	at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)
System.err: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:1083)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:1070)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:1050)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:1042)
System.err: 	at com.tns.gen.java.lang.Runnable.run(Runnable.java:17)
System.err: 	at android.os.Handler.handleCallback(Handler.java:789)
System.err: 	at android.os.Handler.dispatchMessage(Handler.java:98)
System.err: 	at android.os.Looper.loop(Looper.java:164)
System.err: 	at android.app.ActivityThread.main(ActivityThread.java:6541)
System.err: 	at java.lang.reflect.Method.invoke(Native Method)
System.err: 	at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
System.err: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
System.err: Caused by: java.lang.IndexOutOfBoundsException: setSpan (20 ... 20) ends beyond length 19
System.err: 	at android.text.SpannableStringBuilder.checkRange(SpannableStringBuilder.java:1309)
System.err: 	at android.text.SpannableStringBuilder.setSpan(SpannableStringBuilder.java:680)
System.err: 	at android.text.SpannableStringBuilder.setSpan(SpannableStringBuilder.java:672)
System.err: 	at android.text.Selection.setSelection(Selection.java:76)
System.err: 	at android.text.Selection.setSelection(Selection.java:87)
System.err: 	at android.widget.EditText.setSelection(EditText.java:127)
System.err: 	... 14 more