@goodbetterbist/input-validators NPM

@goodbetterbist/input-validators

InputNumberValidator prevents users from entering values based on input field attributes.

Installation

To install this library, run:

npm i @goodbetterbist/input-validators

Usage

TypeScript

Import the InputValidatorsModule:

import { InputValidatorsModule } from '@goodbetterbist/input-validators';

@NgModule({
  imports: [
     ...,
    InputValidatorsModule
  ],
    ...
})
export class AppModule { }

HTML

Use the `inputNumberValidator` directive in your input fields for numbers only.

<input type="text" inputNumberValidator />

For `min` & `max` value

<!-- To input numbers between 1 & 100  -->
<input
type="text"
inputNumberValidator
placeholder="00"
[min]="1"
[max]="100"
/>

To disable copy and paste

<input
type="text"
inputNumberValidator
[disableCopy] = 'true'
[disablePaste] = 'true'
/>

To allow decimal numbers

<input
type="text"
inputNumberValidator
[allowDecimal]="true"
/>
<!-- to allow decimal numbers in an input field -->

To limit decimal places

<input
type="text"
inputNumberValidator
placeholder="00"
[limitDecimalPlaces]="2"
/>
<!-- limits the number of decimal places allowed in an input field -->

To allow negative numbers

<input
type="text"
inputNumberValidator
placeholder="00"
[allowNegative]="true"
/>

Attributes with usage

Attribute	Usage	Description
`inputNumberValidator`	`<input type="text" inputNumberValidator />`	Allow to use numbers only
`min`	`<input type="text" inputNumberValidator [min]="2" />`	Prevents from entering less than minimum
`max`	`<input type="text" inputNumberValidator [max]="100" />`	Prevents from entering more than maximum
`disableCopy`	`<input type="text" inputNumberValidator [disableCopy]="true" />`	Prevents from copying input value
`disablePaste`	`<input type="text" inputNumberValidator [disablePaste]="true" />`	Prevents from pasting value
`allowDecimal`	`<input type="text" inputNumberValidator [allowDecimal]="true" />`	To allow decimal numbers
`limitDecimalPlaces`	`<input type="text" inputNumberValidator [limitDecimalPlaces]="2" />`	To limit decimal places
`allowNegative`	`<input type="text" inputNumberValidator [allowNegative]="true" />`	To allow negative numbers