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

`



`

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

`
[placeholder]="'100.00'"
[label]="'Total Amount'"
[float]="true"
>
`

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

`
[placeholder]="'100.00'"
[label]="'Total Amount'"
[float]="true"
formControlName="number_2"
>

`

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

`



``