Number Input Formatter

This Angular Material component (Module) allows you to have an input field that adresses formatting and returns just the value without the formatting.

The input field supports commas to separte the value and 2 decimals for floats. You can specify if you only require the integer and not decimal value.

Installation

npm install number-input-formatter

Scaffolding

Import the module into your project under imports

imports: [
  BrowserModule,
  AppRoutingModule,
  NumberInputFormatterModule
]

Use

First create a formControl defining the input

form = this.fb.group({
  number_1: [null],
  number_2:[null]
})

In your component, use the following tag

<div style="margin: 24px;" [formGroup]="selection">
  <wav-numeric-input-formatter
    [placeholder]="'100.00'"
    [label]="'Total Amount'"
    [prefix]="'$'"
    [suffix]="'.00'"
    [float]="false"
    formControlName="number_1"
  ></wav-numeric-input-formatter>
</div>

if you do not want to use it as a formControl then the implementation looks like this

<wav-numeric-input-formatter
[placeholder]="'100.00'"
[label]="'Total Amount'"
[float]="true"
></wav-numeric-input-formatter>

Inputs

The following Inputs are available

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | label | STRING | NULL | Label for input | | placeholder | STRING | NULL | Placehold for input | | appearence | STRING | NULL | field style | | float | BOOLEAN | FALSE | Allow for 2 decimals in format | | prefix | STRING | NULL | prefix string to field | | suffix | STRING | NULL | suffix string to field | | maxLen | NUMBER | NULL | limit text entry length | | maxValue | NUMBER | NULL | limit max value | | maxValue | NUMBER | NULL | limit min value | | required | BOOLEAN | FASLE | field is required |

Sample Implementation

<wav-numeric-input-formatter
  [placeholder]="'100.00'"
  [label]="'Total Amount'"
  [float]="true"
  formControlName="number_2"
></wav-numeric-input-formatter>

Input return

You will note that the control will return the number - no formatting is included

Below is a sample of the implementation

form = this.fb.group({
  number_1: [null],
  number_2:[null]
})

ngOnInit() {

  this.form.patchValue({ number_1: 12221.1, number_2: '1234'})
  this.form.valueChanges.subscribe(data => console.log(data))

}

HTML setup for component with inputs and outputs

<div [formGroup]="form">
  <app-numeric-input-formatter
    fxFlex="30"
    [placeholder]="'100.00'"
    [label]="'Total Amount'"
    [float]="true"
    [required]="true"
    [maxLen]="10"
    [appearence]="'outline'"
    formControlName="info"
  ></app-numeric-input-formatter>

    <wav-numeric-input-formatter
    [placeholder]="'100.00'"
    [label]="'Total Amount'"
    [float]="true"
    formControlName="number_2"
  ></wav-numeric-input-formatter>
</div>