Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcMaskInputComponent

A masked input is an input field where a developer can control user input and format the visible value, based on configurable rules

igc-mask-input

prefix - Renders content before the input

suffix - Renders content after the input

helper-text - Renders content below the input

value-missing - Renders content when the required validation fails.

bad-input - Renders content when a required mask pattern validation fails.

custom-error - Renders content when setCustomValidity(message) is set.

invalid - Renders content when the component is in invalid state (validity.valid = false).

igcInput - Emitted when the control receives user input

igcChange - Emitted when an alteration of the control's value is committed by the user

container - The main wrapper that holds all main input elements

input - The native input element

label - The native label element

prefix - The prefix wrapper

suffix - The suffix wrapper

helper-text - The helper text wrapper

Hierarchy

Hierarchy

  • IgcMaskInputBaseComponent
    • IgcMaskInputComponent

Properties

Accessors

Methods

Properties

disabled: boolean

The disabled state of the component.

false
invalid: boolean

Sets the control into invalid state (visual state only).

false
label: string

The label for the control.

name: string

The name attribute of the control.

outlined: boolean = false

Whether the control will have outlined appearance.

false
placeholder: string

The placeholder attribute of the control.

readOnly: boolean = false

Makes the control a readonly field.

readonly

false
valueMode: MaskInputValueMode = 'raw'

Dictates the behavior when retrieving the value of the control:

  • raw: Returns clean input (e.g. "5551234567")
  • withFormatting: Returns with mask formatting (e.g. "(555) 123-4567")

Empty values always return an empty string, regardless of the value mode.

value-mode

'raw'

Accessors

  • get prompt(): string

    The prompt symbol to use for unfilled parts of the mask pattern.

    '_'

    Returns string

  • set prompt(value: string): void

    The prompt symbol to use for unfilled parts of the mask pattern.

    '_'

    Parameters

    • value: string

    Returns void

  • set required(value: boolean): void

    When set, makes the component a required field for validation.

    false

    Parameters

    • value: boolean

    Returns void

  • get validity(): ValidityState

    Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

    Returns ValidityState

  • get value(): string

    The value attribute of the control. Type varies based on the input type and can be string, Date or null.

    Returns string

  • set value(string: string): void

    The value of the input.

    Regardless of the currently set value-mode, an empty value will return an empty string.

    Parameters

    • string: string

    Returns void

  • get willValidate(): boolean

    A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

    Returns boolean

Methods

  • Sets focus on the control.

    Parameters

    • options: FocusOptions

    Returns void

  • Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

    Parameters

    • message: string

    Returns void

  • Replaces the selected text in the control and re-applies the mask

    Parameters

    • replacement: string
    • start: number
    • end: number
    • selectMode: RangeTextSelectMode

    Returns void

  • Sets the text selection range of the control

    Parameters

    • start: number
    • end: number
    • direction: SelectionRangeDirection = 'none'

    Returns void