maxulyanov / ng2-inputmask

Angular 2 directive input mask

ng2-inputmask

Angular 2 directive input mask

Installation

To install this library, run:

$ npm install ng2-inputmask --save

Consuming your library

import library in any Angular application by running:

$ npm install ng2-inputmask

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import library
import { InputMaskModule } from 'ng2-inputmask';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    InputMaskModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use

  <input mask="00:00:00">
  <input mask="AAAA">

Placeholders

0 - number
A - text char

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

ng2-inputmask's Issues

Text field with long size

Hello, I am trying to set a mask to an input field of length of 100, i've read a little the code and kind of got that it validates length an regex from the mask value. So for 100 input value, i'd have to write A 100 times?

Can't change text once it is entered

I'm not sure if this is the intended behavior, but once I finish typing text that matches the mask, I can no longer change it.

For example, if mask="00", I can type 12, however, once I am done entering 12 I can't change it anymore. If I only type the first digit, I can delete it and type something else, just not once it is completed.

input-mask.module.ts is not part of the compilation output

@angular/common = ^5.0.0
@angular/cli = "1.6.0

When i run "ng serve" this error appears

Module build failed: Error: /home/maique/projetos/centroDiagnostico/node_modules/ng2-inputmask/src/input-mask.module.ts is not part of the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (/home/maique/projetos/centroDiagnostico/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:648:23)
    at plugin.done.then (/home/maique/projetos/centroDiagnostico/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/app.module.ts 15:0-48
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

i search for the solution and found this post: angular/angular-cli#8284

Hey all, this is a side effect of the stricter tsconfig as described in https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced#148d.

The tsconfig file is what determines what TS files are compiled. The error you are getting means that the files mentioned are NOT being compiled.

Before we used to compile all files, essentially ignoring what tsconfig listed. This was a bug, because if you don't include a file in the compilation then it should not be compiled.

By default ./src/tsconfig.app.json will only pick up files inside src/. If you have a file outside source, it won't be picked up. But you can add more files to the tsconfig via either files or include.

So for @thaoula's case, you probably want to add this the files in ../models to your tsconfig.app.json and also to your tsconfig.spec.json:

{
"extends": "../tsconfig.json",
"compilerOptions": {
// ...
},
"include": [
"../models/**/*.ts"
],
"exclude": [
// ...
],
}
You can read more about tsconfig files in https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tsconfig.json.md.

@rolaveric's case is slightly different. You have TS files in your node_modules. This really goes against how libraries should be packaged: libraries should never ship their source .ts files.

The reason for this rule is that the TypeScript version your app isn't necessarily the same as the TS version your library uses. Different versions of TS can produce different output, and give different errors for the same input. They don't even support the same language features. So packaging libraries with TS sources will always break someone's project.

So we don't really support using incorrectly packaged libraries with TS sources. It's something you do at your risk.

That being said, maybe you can try adding it to the include array. But I can't guarantee that will work in the future because it's still an incorrectly packaged library.

Regarding AOT: as far as I can tell, AOT is still incorrectly compiling TS that is not included in the tsconfig. I'll bring this up with the compiler team.

Массив масок для телефонов

привет. такой функционал можно добавить? или он есть?

How to make this as generic directive, l want it to have multiple phoneMask that can be common for all the components.???

Any idea when this plugin will support ng4 and above ?

Phone format

Hi,
When I put a US phone format mask such as [phone] and I delete all the information a bracket stays there.

Here is my input

<input type="text" id="orgPhone" class="form-control" mask="[phone]"
               required
               name="orgPhone" [(ngModel)]="contactForm.orgPhone" #orgPhone="ngModel">

Also, if you keep typing with any kind of masks it adds an extra character at the end.

How to change the selected text in the field

I need it when I select the entered values and immediately write new ones, new values were entered. Now when I highlight the values new are not entered, only after removing the entire value from the field. I have no idea how to fix this

Can't submit form while pressing "ENTER" button

`
public onKeyPress(event): void {
if(!this.mask) return;
const key = this.getKey(event);
if(key === keys.BACKSPACE ||key === keys.LEFT || key === keys.RIGHT) return;

const cursorPosition = this.getCursorPosition();
let regexp = this.createRegExp(cursorPosition);

if(regexp != null && !regexp.test(event.key)  || this.getValue().length >= this.mask.length) {
  event.preventDefault();
}

}
`
in this function there is event.preventDefault(), so when i'm trying to submit form, it stops there. May be its better to catch this key and prevent from preventing or to add ENTER key to keys const?