Install

npm install ngx-utilitys --save

You can add each module separately

Importing all directives using NgxDirectivesModule

import { NgxDirectivesModule } from 'ngx-utilitys';

@NgModule({
    ...
  imports: [ NgxDirectivesModule ]
    ...
})
class AppModule {}

Importing all pipes using NgxPipesModule

import { NgxPipesModule } from 'ngx-utilitys';

@NgModule({
    ...
  imports: [ NgxPipesModule ]
    ...
})
class AppModule {}

Or add all in one, importing the NgxUtilitysModule

import { NgxUtilitysModule } from 'ngx-utilitys';

@NgModule({
    ...
  imports: [ NgxUtilitysModule ]
    ...
})
class AppModule {}

Directives

Each directive can be imported separately or just use NgxDirectivesModule

OnlyNumber

An angular directive that allows only numerical input in a form field, blocking non-numerical keypresses and pasted text.

<input type="text" OnlyNumber>

onlyLetters

Allows only letters (upper and lower case) and some special characters (such as accent marks and spaces) in input fields.

<input type="text" onlyLetters>

cpfCnpjMask

An angular directive that allows only numerical input in a form field, blocking non-numerical keypresses and pasted text.

<input type="text" cpfCnpjMask [cpfCnpjMask]="maskType" [(ngModel)]="myValue" />

In this example, maskType is a string property in your component that should be set to either 'cpf' or 'cnpj' depending on which mask you want to apply.

cepMask

Formats a Brazilian postal code input field with a mask. It listens to keyup and blur events to apply the mask and it can be customized with an input parameter to use different mask patterns.

<input type="text" cepMask>

cpfCnpjValid

An Angular directive that provides validation and masks for Brazilian CPF and CNPJ numbers.

<form>
  <input type="text" name="cpfCnpj" cpfCnpjValid [(ngModel)]="cpfCnpjValue">
</form>

cpfMask

Provides a mask for Brazilian CPF numbers and validates their format using the CpfValidator class

<input type="text" formControlName="cpf" cpfMask>

DateMask

Creates a date input mask to format a date

<input type="text" DateMask dateMask="MM/DD/YYYY">

financialMaskAlign

Allows aligning the cursor at the end of a financial mask input field when the user clicks or types

<input type="text" financialMaskAlign>

moveNextByMaxLength

Allows moving to the next input field when the maximum length of the current field is reached

<input type="text" maxlength="10" moveNextByMaxLength>
<input type="text" maxlength="5" moveNextByMaxLength>

NameCharacters

An Angular directive that restricts input to only accept alphabetical characters, spaces, apostrophes, hyphens and some accented letters.

<input type="text" NameCharacters>

NumberCharecters

Allows numeric input in the associated input field.

<input type="text" NumberCharecters>

phoneMask

Applies a mask to a phone number input field, allowing users to input phone numbers

<input type="text" phoneMask>

<input type="text" phoneMask="(99) 9999-9999">

phoneMaskValidator

A custom validator directive that is used to validate phone numbers that are entered in an input field.

<input type="text" phoneMaskValidator>

License

MIT

GitHub @MatheusMunizera  ·