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

element

igc-mask-input

slot

prefix - Renders content before the input

slot

suffix - Renders content after the input

slot

helper-text - Renders content below the input

fires

igcInput - Emitted when the control receives user input

fires

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

fires

igcFocus - Emitted when the control gains focus

fires

igcBlur - Emitted when the control loses focus

csspart

container - The main wrapper that holds all main input elements

csspart

input - The native input element

csspart

label - The native label element

csspart

prefix - The prefix wrapper

csspart

suffix - The suffix wrapper

csspart

helper-text - The helper text wrapper

Hierarchy

  • IgcMaskInputBaseComponent
    • IgcMaskInputComponent

Index

Constructors

Properties

dir: Direction = 'auto'

The direction attribute of the control.

disabled: boolean = false

Makes the control a disabled field.

invalid: boolean = false

Controls the validity of the control.

label: string

The label for the control.

name: string

The name attribute of the control.

outlined: boolean = false
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.

required: boolean = false

Makes the control a required field.

size: "small" | "medium" | "large"

Determines the size of the component.

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.
styles: CSSResult = styles
tagName: "igc-mask-input" = 'igc-mask-input'

Accessors

  • get mask(): string
  • set mask(val: string): void
  • get value(): 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.

    Returns string

  • 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

Methods

  • blur(): void
  • checkValidity(): boolean
  • connectedCallback(): void
  • emitEvent<K, D>(type: K, eventInitDict?: CustomEventInit<D>): boolean
  • Type Parameters

    • K extends keyof IgcInputEventMap

    • D extends string | void

    Parameters

    • type: K
    • Optional eventInitDict: CustomEventInit<D>

    Returns boolean

  • focus(options?: FocusOptions): void
  • reportValidity(): boolean
  • select(): void
  • setCustomValidity(message: string): 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

  • setRangeText(replacement: string, start: number, end: number, _selectMode?: "end" | "start" | "select" | "preserve"): void
  • Replaces the selected text in the control and re-applies the mask

    Parameters

    • replacement: string
    • start: number
    • end: number
    • _selectMode: "end" | "start" | "select" | "preserve" = 'preserve'

    Returns void

  • setSelectionRange(start: number, end: number, direction?: "none" | "forward" | "backward"): void
  • themeAdopted(controller: ThemeController): void