@uiowa/digit-only
Version:
This package includes two Angular directives. The digitOnly directive only allows numbers in the input box when typing, pasting or drag/dropping. The mask directive checks the input pattern attribute.
114 lines (70 loc) • 4.73 kB
Markdown
# Angular DigitOnly Directive and Mask Directive
[](https://github.com/changhuixu/ngx-digit-only/actions)
[](https://www.npmjs.com/package/@uiowa/digit-only)
## [Demo](https://changhuixu.github.io/ngx-digit-only/)
[Medium Article: Digit Only Directive in Angular](https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3)
- [x] **input `digitOnly` directive**
An Angular directive only allows [0-9] in the input box when typing, pasting or drag/dropping. This directive handles both Windows keyboard and Mac keyboard. This directive works with `input type="text"`, not `input type="number"`.
- [x] **input `mask` directive**
This directive checks the input `pattern` attribute if set.
## CHANGELOG
- **v4.0.0**: this package now updated to Angular v19 and uses the style of standalone directive.
- **v3.2.0**(**v2.4.0**): `digitOnly` directive now supports disabling paste events (merges a pull request [#57](/../../pull/49), fixes [#56](/../../issues/56)).
- **v3.1.0**(**v2.3.0**): `digitOnly` directive now supports negative values (merges a pull request [#49](/../../pull/49)).
- **v3.0.0**: a release on par with Angular 12. For projects in Angular v10 or v11, please use v2 of this library.
- **v2.2.3**: fix an issue ([#50](/../../issues/50)) in the `mask` directive: support dynamic pattern attribute binding.
- **v2.2.2**: fix an issue ([#28](/../../issues/28)) to prevent [dead keys](https://en.wikipedia.org/wiki/Dead_key) in the `digitOnly` directive.
- **v2.2.1**: `digitOnly` directive now dispatches an `input` event when paste in Firefox.
- **v2.2.0**: fix an issue ([#35](/../../issues/35)): for better international support, both `mask` and `digitOnly` directives now also check the `code` attribute in `KeyboardEvent`.
- **v2.1.0**(**v1.9.0**): fix an issue ([#39](/../../issues/39)) when typing decimal numbers for the `digitOnly` directive
- **v2.0.0**: add `tslib` v2.0 in the dependency, which is required by TypeScript 3.9 (as of Angular 10).
- **v1.8.0**: fix an issue ([#38](/../../issues/38)) when pasting in IE and Edge for the `digitOnly` directive
- **v1.7.0**: the `digitOnly` directive allows model binding to `min`, `max`, and `pattern` properties.
- See demo page for examples.
- **v1.6.0**: the `mask` directive is added to this library.
- See an example below about an input allows `##-####`.
- **v1.5.0**: this directive checks the input `pattern` attribute if set.
- See an example below about an input only allows decimal numbers with precision of 2.
- **v1.3.0**: this directive accepts an attribute for the separator for decimal numbers.
- By default, the separator is a `.`. You can set it to comma when needed.
- **v1.1.0**: this directive accepts an attribute which indicates if the input number allows a decimal point.
---
## Installation
```shell
npm i @uiowa/digit-only
```
## Usage
```typescript
// in your Angular component
import { DigitOnlyDirective } from "@uiowa/digit-only";
@Component({
selector: "app-digit-only-demos",
imports: [DigitOnlyDirective, FormsModule],
templateUrl: "./digit-only-demos.component.html",
styleUrl: "./digit-only-demos.component.css",
})
export class DigitOnlyDemosComponent {}
```
```html
<!-- in your component.html -->
<input type="text" digitOnly />
<!-- pull out the numeric keypad in mobile devices and tablets -->
<input type="text" name="zipcode" id="zipcode" placeholder="00000" maxlength="5" inputmode="numeric" pattern="[0-9]*" digitOnly />
<!-- turn off browser autocomplete -->
<input ... autocomplete="off" />
<!-- allows decimal input -->
<input id="decimal-number" type="text" digitOnly decimal="true" placeholder="000" />
<!-- allows to set decimal separator -->
<label for="digit-only-decimal-comma">
Digit Only input box that allows a <i>decimal point</i> using
<strong>a comma as the separator</strong>
</label>
<input id="digit-only-decimal-comma" type="text" digitOnly decimal="true" decimalSeparator="," placeholder="0,00" pattern="[0-9]+([,][0-9]+)?" />
<!-- Digit Only input only allows two decimal places -->
<input id="currency" type="text" name="currency" inputmode="numeric" pattern="^\d+(\.\d{1,2})?$" placeholder="0.00" digitOnly decimal="true" />
```
### `mask` directive usage
```html
<!-- input masked with pattern attribute: ##-#### -->
<input id="org-dept" type="text" pattern="^(\d{0,2}|\d{2}-\d{0,4})$" name="org-dept" title="org-dept" placeholder="00-0000" mask />
```