Skip to content

A simple directive which manages decimal numbers format in input and textarea inside a ngForm

Notifications You must be signed in to change notification settings

danielzotti/ng-input-number-i18n

Repository files navigation

@danielzotti/ng-input-number-i18n

A simple directive which manages decimal numbers in input and textarea inside a ngForm.

  • It stores the value as a JavaScript float but it displays the formatted number based on locale (with decimal and thousands separator).
  • On focus, it shows the real number with the decimal separator based on locale.
  • It formats numbers using a CustomPipe that extends the Angular DecimalPipe.
  • It sanitizes number while typing (and also on paste) based on the locale thousands and decimal separator:
    • e.g. locale = it-IT accepts only
      • numbers: 0-9
      • one minus sign: -
      • one thousands separator: .
      • one decimal separator: ,
    • e.g. locale = en-US accepts only
      • numbers: 0-9
      • one minus sign: -
      • one thousands separator: ,
      • one decimal separator: .

Try it yourself

How to use it

Install the package

Run npm i @danielzotti/ng-input-number-i18n --save

Import the module

Import NgInputNumberI18nModule from @danielzotti/ng-input-number-i18n in app.module.ts

Use forRoot to configure the NgInputNumberI18nModule:

  • production: boolean (default: true)
    • If false on double click event on input, all the values are logged in the console
  • undoOnEsc: boolean (default: true)
    • If ESC key is pressed the changes on input value are canceled
  • pipe: CustomPipe (default: NgInputNumberI18nPipe which is a DecimalPipe with null check)
    • The default format pipe can be overridden by a CustomPipe
    • CustomPipe must implement the Angular DecimalPipe
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from "@angular/forms";

import { NgInputNumberI18nModule } from '@danielzotti/ng-input-number-i18n';

import { AppComponent } from "./app.component";
import { CustomFormatPipe } from './custom.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomFormatPipe
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule, 
    NgInputNumberI18nModule.forRoot({ production: false, undoOnEsc: false, pipe: CustomFormatPipe }),
  ],
  bootstrap: [AppComponent],
  providers: [CustomFormatPipe]
})
export class AppModule {}

Use it in input

<form #form="ngForm">
  ...
  <input ngInputNumberI18n=".2-2" [(ngModel)]="value">
  ...
</form>

...or in textarea

<form #form="ngForm">
  ...
  <textarea [ngInputNumberI18n]="format" [(ngModel)]="value"></textarea>
  ...
</form>

@Input and @Ouput

Input

  • ngInputNumberI18n: digitsInfo
  • onlyPositive: boolean (default: false)
    • only positive number are permitted
  • selectAllOnFocus: boolean (default: true)
    • the input value is selected on focus

Output

  • ngInputNumberI18nValues: NgInputNumberI18nOutputValues
    • emits an event with various information everytime the values change
export interface NgInputNumberI18nOutputValues {
  realValue: number;      // the javascript value
  inputValue: string;     // the string visible in the input value (on focus)
  formattedValue: string; // the string visible
  format: string;         // the format (digitsInfo)
}

Full example

<input [ngInputNumberI18n]="format" 
       [(ngModel)]="value"
       [onlyPositive]="true" 
       [selectAllOnFocus]="false"
       (ngInputNumberI18nValues)="updateValues($event)">

Thanks to

How to built npm ready component library with Angular by Mohan Ram

Providing Module Configuration Using forRoot() And Ahead-Of-Time Compiling In Angular 7.2.0 by Ben Nadel