README

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>

Usage no npm install needed!