ngx-mask

ngx-mask

Version 21.0.1
Published 17 days ago
420 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<NgxMaskConfig>;

variable initialConfig

const initialConfig: NgxMaskConfig;

variable NEW_CONFIG

const NEW_CONFIG: InjectionToken<NgxMaskConfig>;

variable NGX_MASK_CONFIG

const NGX_MASK_CONFIG: InjectionToken<NgxMaskConfig>;

variable timeMasks

const timeMasks: string[];

variable withoutValidation

const withoutValidation: string[];

Functions

function provideEnvironmentNgxMask

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

function provideNgxMask

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

Classes

class NgxMaskDirective

class NgxMaskDirective
    implements
        ControlValueAccessor,
        OnChanges,
        OnInit,
        Validator,
        FormValueControl<string> {}

constructor

constructor();

property allowNegativeNumbers

allowNegativeNumbers: _angular_core.InputSignal<boolean>;

property apm

apm: _angular_core.InputSignal<boolean>;

property clearIfNotMatch

clearIfNotMatch: _angular_core.InputSignal<boolean>;

property decimalMarker

decimalMarker: _angular_core.InputSignal<'.' | ',' | ['.', ',']>;

property dirty

dirty: _angular_core.InputSignal<boolean>;

property disabled

disabled: _angular_core.InputSignal<boolean>;

property dropSpecialCharacters

dropSpecialCharacters: _angular_core.InputSignal<
    boolean | string[] | readonly string[]
>;

property errors

errors: _angular_core.InputSignal<readonly WithOptionalField<ValidationError>[]>;

property hiddenInput

hiddenInput: _angular_core.InputSignal<boolean>;

property inputTransformFn

inputTransformFn: _angular_core.InputSignal<any>;

property instantPrefix

instantPrefix: _angular_core.InputSignal<boolean>;

property invalid

invalid: _angular_core.InputSignal<boolean>;

property keepCharacterPositions

keepCharacterPositions: _angular_core.InputSignal<boolean>;

property leadZero

leadZero: _angular_core.InputSignal<boolean>;

property leadZeroDateTime

leadZeroDateTime: _angular_core.InputSignal<boolean>;

property mask

mask: _angular_core.InputSignal<string>;

property maskFilled

maskFilled: _angular_core.OutputEmitterRef<void>;

property name

name: _angular_core.InputSignal<string>;

property onChange

onChange: (_: any) => void;

property onTouch

onTouch: () => void;

property outputTransformFn

outputTransformFn: _angular_core.InputSignal<any>;

property ɵdir

static ɵdir: _angular_core.ɵɵDirectiveDeclaration<
    NgxMaskDirective,
    'input[mask], textarea[mask]',
    ['mask', 'ngxMask'],
    {
        mask: { alias: 'mask'; required: false; isSignal: true };
        specialCharacters: {
            alias: 'specialCharacters';
            required: false;
            isSignal: true;
        };
        patterns: { alias: 'patterns'; required: false; isSignal: true };
        prefix: { alias: 'prefix'; required: false; isSignal: true };
        suffix: { alias: 'suffix'; required: false; isSignal: true };
        thousandSeparator: {
            alias: 'thousandSeparator';
            required: false;
            isSignal: true;
        };
        decimalMarker: {
            alias: 'decimalMarker';
            required: false;
            isSignal: true;
        };
        dropSpecialCharacters: {
            alias: 'dropSpecialCharacters';
            required: false;
            isSignal: true;
        };
        hiddenInput: { alias: 'hiddenInput'; required: false; isSignal: true };
        showMaskTyped: {
            alias: 'showMaskTyped';
            required: false;
            isSignal: true;
        };
        placeHolderCharacter: {
            alias: 'placeHolderCharacter';
            required: false;
            isSignal: true;
        };
        shownMaskExpression: {
            alias: 'shownMaskExpression';
            required: false;
            isSignal: true;
        };
        clearIfNotMatch: {
            alias: 'clearIfNotMatch';
            required: false;
            isSignal: true;
        };
        validation: { alias: 'validation'; required: false; isSignal: true };
        separatorLimit: {
            alias: 'separatorLimit';
            required: false;
            isSignal: true;
        };
        allowNegativeNumbers: {
            alias: 'allowNegativeNumbers';
            required: false;
            isSignal: true;
        };
        leadZeroDateTime: {
            alias: 'leadZeroDateTime';
            required: false;
            isSignal: true;
        };
        leadZero: { alias: 'leadZero'; required: false; isSignal: true };
        triggerOnMaskChange: {
            alias: 'triggerOnMaskChange';
            required: false;
            isSignal: true;
        };
        apm: { alias: 'apm'; required: false; isSignal: true };
        inputTransformFn: {
            alias: 'inputTransformFn';
            required: false;
            isSignal: true;
        };
        outputTransformFn: {
            alias: 'outputTransformFn';
            required: false;
            isSignal: true;
        };
        keepCharacterPositions: {
            alias: 'keepCharacterPositions';
            required: false;
            isSignal: true;
        };
        instantPrefix: {
            alias: 'instantPrefix';
            required: false;
            isSignal: true;
        };
        value: { alias: 'value'; required: false; isSignal: true };
        errors: { alias: 'errors'; required: false; isSignal: true };
        disabled: { alias: 'disabled'; required: false; isSignal: true };
        touched: { alias: 'touched'; required: false; isSignal: true };
        dirty: { alias: 'dirty'; required: false; isSignal: true };
        invalid: { alias: 'invalid'; required: false; isSignal: true };
        pending: { alias: 'pending'; required: false; isSignal: true };
        readonly: { alias: 'readonly'; required: false; isSignal: true };
        required: { alias: 'required'; required: false; isSignal: true };
        name: { alias: 'name'; required: false; isSignal: true };
    },
    { value: 'valueChange'; touched: 'touchedChange'; maskFilled: 'maskFilled' },
    never,
    never,
    true,
    never
>;

property ɵfac

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

property patterns

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

property pending

pending: _angular_core.InputSignal<boolean>;

property placeHolderCharacter

placeHolderCharacter: _angular_core.InputSignal<string>;

property prefix

prefix: _angular_core.InputSignal<string>;

property readonly

readonly: _angular_core.InputSignal<boolean>;

property required

required: _angular_core.InputSignal<boolean>;

property separatorLimit

separatorLimit: _angular_core.InputSignal<string>;

property showMaskTyped

showMaskTyped: _angular_core.InputSignal<boolean>;

property shownMaskExpression

shownMaskExpression: _angular_core.InputSignal<string>;

property specialCharacters

specialCharacters: _angular_core.InputSignal<string[] | readonly string[]>;

property suffix

suffix: _angular_core.InputSignal<string>;

property thousandSeparator

thousandSeparator: _angular_core.InputSignal<string>;

property touched

touched: _angular_core.ModelSignal<boolean>;

property triggerOnMaskChange

triggerOnMaskChange: _angular_core.InputSignal<boolean>;

property validation

validation: _angular_core.InputSignal<boolean>;

property value

value: _angular_core.ModelSignal<string>;

method checkSelectionOnDeletion

checkSelectionOnDeletion: (el: HTMLInputElement) => void;

method focus

focus: () => void;

Focus the input element. Required by FormValueControl interface for Signal Forms.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

method onBlur

onBlur: (e: Event) => void;

method onClick

onClick: (e: Event) => void;

method onCompositionEnd

onCompositionEnd: (e: Event) => void;

method onCompositionStart

onCompositionStart: () => void;

method onFocus

onFocus: () => void;

method onInput

onInput: (e: Event) => void;

method onKeyDown

onKeyDown: (event: Event) => void;

method onModelChange

onModelChange: (value: unknown) => 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: _angular_core.ɵɵFactoryDeclaration<NgxMaskPipe, never>;

property ɵpipe

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

method transform

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

class NgxMaskService

class NgxMaskService extends NgxMaskApplierService {}

property currentValue

currentValue: string;

property isInitialized

isInitialized: boolean;

property isNumberValue

isNumberValue: boolean;

property maskChanged

maskChanged: boolean;

property maskExpressionArray

maskExpressionArray: string[];

property maskIsShown

maskIsShown: string;

property onChange

onChange: (_: any) => void;

property ɵfac

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

property ɵprov

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

property previousValue

previousValue: string;

property selEnd

selEnd: number;

property selStart

selStart: number;

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;

Applies the mask to the input value.
Parameter inputValue
The input value to be masked.
Parameter maskExpression
The mask expression to apply.
Parameter position
The position in the input value.
Parameter justPasted
Whether the value was just pasted.
Parameter backspaced
Whether the value was backspaced.
Parameter cb
Callback function.
Returns
The masked value.

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;

Type Aliases

type InputTransformFn

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

type NgxMaskConfig

type NgxMaskConfig = {
    suffix: string;
    prefix: string;
    thousandSeparator: string;
    decimalMarker: '.' | ',' | ['.', ','];
    clearIfNotMatch: boolean;
    showMaskTyped: boolean;
    placeHolderCharacter: string;
    shownMaskExpression: string;
    specialCharacters: string[] | readonly string[];
    dropSpecialCharacters: boolean | string[] | readonly string[];
    hiddenInput: boolean;
    validation: boolean;
    instantPrefix: boolean;
    separatorLimit: string;
    apm: boolean;
    allowNegativeNumbers: boolean;
    leadZeroDateTime: boolean;
    leadZero: boolean;
    triggerOnMaskChange: boolean;
    keepCharacterPositions: boolean;
    inputTransformFn: InputTransformFn;
    outputTransformFn: OutputTransformFn;
    maskFilled: EventEmitter<void>;
    patterns: Record<
        string,
        {
            pattern: RegExp;
            optional?: boolean;
            symbol?: string;
        }
    >;
};

type NgxMaskOptions

type NgxMaskOptions = Partial<NgxMaskConfig>;

type OutputTransformFn

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

Package Files (1)

types/ngx-mask.d.ts

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 16 days ago.
Package analyzed in 3551 ms.
Missing or incorrect documentation? Open an issue for this package.