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

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

Other

disabled: boolean

The disabled state of the component.

false
invalid: boolean

Control the validity of the control.

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.

placeholder: string

The placeholder attribute of the control.

prompt: string

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

readOnly: boolean = false

Makes the control a readonly field.

readonly

valueMode: "raw" | "withFormatting" = 'raw'

Dictates the behavior when retrieving the value of the control:

  • raw will return the clean user input.
  • withFormatting will return the value with all literals and prompts.

value-mode

  • set required(value): 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 of the input.

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

    Returns string

  • set value(string): void
  • The value attribute of the control.

    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

  • 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

    Returns void

lifecycle

  • Invoked when the component is added to the document's DOM.

    In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

    connectedCallback() {
    super.connectedCallback();
    addEventListener('keydown', this._handleKeydown);
    }

    Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

    Returns void