ngx-mask

ngx-mask

Version 18.0.0
Published 2 months ago
808 kB
1 dependency
MIT license

Install

npm i ngx-mask

yarn add ngx-mask

pnpm add ngx-mask

Overview

awesome ngx mask

Index

Variables

variable INITIAL_CONFIG

const INITIAL_CONFIG: InjectionToken<IConfig>;

variable initialConfig

const initialConfig: IConfig;

variable NEW_CONFIG

const NEW_CONFIG: InjectionToken<IConfig>;

variable NGX_MASK_CONFIG

const NGX_MASK_CONFIG: InjectionToken<IConfig>;

variable timeMasks

const timeMasks: string[];

variable withoutValidation

const withoutValidation: string[];

Functions

function provideEnvironmentNgxMask

provideEnvironmentNgxMask: (
    configValue?: optionsConfig | (() => optionsConfig)
) => EnvironmentProviders;

function provideNgxMask

provideNgxMask: (
    configValue?: optionsConfig | (() => optionsConfig)
) => Provider[];

Classes

class NgxMaskDirective

class NgxMaskDirective implements ControlValueAccessor, OnChanges, Validator {}

property allowNegativeNumbers

allowNegativeNumbers: boolean;

property apm

apm: boolean;

property clearIfNotMatch

clearIfNotMatch: boolean;

property decimalMarker

decimalMarker: '.' | ',' | ['.', ','];

property dropSpecialCharacters

dropSpecialCharacters: boolean | string[] | readonly string[];

property hiddenInput

hiddenInput: boolean;

property inputTransformFn

inputTransformFn: InputTransformFn;

property keepCharacterPositions

keepCharacterPositions: boolean;

property leadZero

leadZero: boolean;

property leadZeroDateTime

leadZeroDateTime: boolean;

property maskExpression

maskExpression: string;

property maskFilled

maskFilled: EventEmitter<void>;

property onChange

onChange: (_: any) => void;

property onTouch

onTouch: () => void;

property outputTransformFn

outputTransformFn: OutputTransformFn;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    NgxMaskDirective,
    'input[mask], textarea[mask]',
    ['mask', 'ngxMask'],
    {
        maskExpression: { alias: 'mask'; required: false };
        specialCharacters: { alias: 'specialCharacters'; required: false };
        patterns: { alias: 'patterns'; required: false };
        prefix: { alias: 'prefix'; required: false };
        suffix: { alias: 'suffix'; required: false };
        thousandSeparator: { alias: 'thousandSeparator'; required: false };
        decimalMarker: { alias: 'decimalMarker'; required: false };
        dropSpecialCharacters: {
            alias: 'dropSpecialCharacters';
            required: false;
        };
        hiddenInput: { alias: 'hiddenInput'; required: false };
        showMaskTyped: { alias: 'showMaskTyped'; required: false };
        placeHolderCharacter: { alias: 'placeHolderCharacter'; required: false };
        shownMaskExpression: { alias: 'shownMaskExpression'; required: false };
        showTemplate: { alias: 'showTemplate'; required: false };
        clearIfNotMatch: { alias: 'clearIfNotMatch'; required: false };
        validation: { alias: 'validation'; required: false };
        separatorLimit: { alias: 'separatorLimit'; required: false };
        allowNegativeNumbers: { alias: 'allowNegativeNumbers'; required: false };
        leadZeroDateTime: { alias: 'leadZeroDateTime'; required: false };
        leadZero: { alias: 'leadZero'; required: false };
        triggerOnMaskChange: { alias: 'triggerOnMaskChange'; required: false };
        apm: { alias: 'apm'; required: false };
        inputTransformFn: { alias: 'inputTransformFn'; required: false };
        outputTransformFn: { alias: 'outputTransformFn'; required: false };
        keepCharacterPositions: {
            alias: 'keepCharacterPositions';
            required: false;
        };
    },
    { maskFilled: 'maskFilled' },
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgxMaskDirective, never>;

property patterns

patterns: Record<
    string,
    { pattern: RegExp; optional?: boolean; symbol?: string }
>;

property placeHolderCharacter

placeHolderCharacter: string;

property prefix

prefix: string;

property separatorLimit

separatorLimit: string;

property showMaskTyped

showMaskTyped: boolean;

property shownMaskExpression

shownMaskExpression: string;

property showTemplate

showTemplate: boolean;

property specialCharacters

specialCharacters: string[] | readonly string[];

property suffix

suffix: string;

property thousandSeparator

thousandSeparator: string;

property triggerOnMaskChange

triggerOnMaskChange: boolean;

property validation

validation: boolean;

method checkSelectionOnDeletion

checkSelectionOnDeletion: (el: HTMLInputElement) => void;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method onBlur

onBlur: (e: CustomKeyboardEvent) => void;

method onClick

onClick: (e: MouseEvent | CustomKeyboardEvent) => void;

method onCompositionEnd

onCompositionEnd: (e: CustomKeyboardEvent) => void;

method onCompositionStart

onCompositionStart: () => void;

method onFocus

onFocus: () => void;

method onInput

onInput: (e: CustomKeyboardEvent) => void;

method onKeyDown

onKeyDown: (e: CustomKeyboardEvent) => void;

method onModelChange

onModelChange: (value: string | undefined | null | number) => void;

method onPaste

onPaste: () => void;

method registerOnChange

registerOnChange: (fn: typeof this.onChange) => void;

method registerOnTouched

registerOnTouched: (fn: typeof this.onTouch) => void;

method setDisabledState

setDisabledState: (isDisabled: boolean) => void;

It disables the input element

method validate

validate: ({ value }: FormControl) => ValidationErrors | null;

method writeValue

writeValue: (controlValue: unknown) => Promise<void>;

It writes the value in the input

class NgxMaskPipe

class NgxMaskPipe implements PipeTransform {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgxMaskPipe, never>;

property ɵpipe

static ɵpipe: i0.ɵɵPipeDeclaration<NgxMaskPipe, 'mask', true>;

method transform

transform: (
    value: string | number,
    mask: string,
    { patterns, ...config }?: Partial<IConfig>
) => string;

class NgxMaskService

class NgxMaskService extends NgxMaskApplierService {}

property isNumberValue

isNumberValue: boolean;

property maskChanged

maskChanged: boolean;

property maskIsShown

maskIsShown: string;

property onChange

onChange: (_: any) => void;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<NgxMaskService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<NgxMaskService>;

property selEnd

selEnd: number;

property selStart

selStart: number;

property triggerOnMaskChange

triggerOnMaskChange: boolean;

property writingValue

writingValue: boolean;

Whether we are currently in writeValue function, in this case when applying the mask we don't want to trigger onChange function, since writeValue should be a one way only process of writing the DOM value based on the Angular model value.

method applyMask

applyMask: (
    inputValue: string,
    maskExpression: string,
    position?: number,
    justPasted?: boolean,
    backspaced?: boolean,
    cb?: (...args: any[]) => any
) => string;

method applyValueChanges

applyValueChanges: (
    position: number,
    justPasted: boolean,
    backspaced: boolean,
    cb?: (...args: any[]) => any
) => void;

method checkDropSpecialCharAmount

checkDropSpecialCharAmount: (mask: string) => number;

method clearIfNotMatchFn

clearIfNotMatchFn: () => void;

method currentLocaleDecimalMarker

currentLocaleDecimalMarker: () => string;

method getActualValue

getActualValue: (res: string) => string;

method hideInput

hideInput: (inputValue: string, maskExpression: string) => string;

method numberToString

numberToString: (value: number | string) => string;

Convert number value to string 3.1415 -> '3.1415' 1e-7 -> '0.0000001'

method removeMask

removeMask: (inputValue: string) => string;

method shiftTypedSymbols

shiftTypedSymbols: (inputValue: string) => string;

method showMaskInInput

showMaskInInput: (inputVal?: string) => string;

Interfaces

interface IConfig

interface IConfig {}

property allowNegativeNumbers

allowNegativeNumbers: boolean;

property apm

apm: boolean;

property clearIfNotMatch

clearIfNotMatch: boolean;

property decimalMarker

decimalMarker: '.' | ',' | ['.', ','];

property dropSpecialCharacters

dropSpecialCharacters: boolean | string[] | readonly string[];

property hiddenInput

hiddenInput: boolean | undefined;

property inputTransformFn

inputTransformFn: InputTransformFn;

property keepCharacterPositions

keepCharacterPositions: boolean;

property leadZero

leadZero: boolean;

property leadZeroDateTime

leadZeroDateTime: boolean;

property maskFilled

maskFilled: EventEmitter<void>;

property outputTransformFn

outputTransformFn: OutputTransformFn;

property patterns

patterns: Record<
    string,
    {
        pattern: RegExp;
        optional?: boolean;
        symbol?: string;
    }
>;

property placeHolderCharacter

placeHolderCharacter: string;

property prefix

prefix: string;

property separatorLimit

separatorLimit: string;

property showMaskTyped

showMaskTyped: boolean;

property shownMaskExpression

shownMaskExpression: string;

property showTemplate

showTemplate: boolean;

property specialCharacters

specialCharacters: string[] | readonly string[];

property suffix

suffix: string;

property thousandSeparator

thousandSeparator: string;

property triggerOnMaskChange

triggerOnMaskChange: boolean;

property validation

validation: boolean;

Type Aliases

type InputTransformFn

type InputTransformFn = (value: unknown) => string | number;

type optionsConfig

type optionsConfig = Partial<IConfig>;

type OutputTransformFn

type OutputTransformFn = (value: string | number | undefined | null) => unknown;

Package Files (6)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ngx-mask.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ngx-mask)

HTML

<a href="https://www.jsdocs.io/package/ngx-mask"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 months ago.
Package analyzed in 2874 ms.
Missing or incorrect documentation? Open an issue for this package.