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

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

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

Hierarchy

  • IgcMaskInputBaseComponent
    • IgcMaskInputComponent

Properties

Accessors

Methods

Properties

disabled

disabled: boolean

The disabled state of the component

Attr

[disabled=false]

invalid

invalid: boolean

Control the validity of the control.

Attr

label

label: string

The label for the control.

Attr

name

name: string

The name attribute of the control.

Attr

outlined

outlined: boolean = false

Whether the control will have outlined appearance.

Attr

placeholder

placeholder: string

The placeholder attribute of the control.

Attr

prompt

prompt: string

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

readOnly

readOnly: boolean = false

Makes the control a readonly field.

Attr

readonly

required

required: boolean

Makes the control a required field in a form context.

Attr

valueMode

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.

Attr

value-mode

Accessors

form

mask

validationMessage

validity

  • 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

value

  • get value(): string

  • The value of the input.

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

    Attr

    Returns string

  • set value(string): void

  • The value attribute of the control.

    Parameters

    • string: string

    Returns void

willValidate

  • 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

blur

checkValidity

focus

  • focus(options?): void

  • Sets focus on the control.

    Parameters

    • options: FocusOptions

    Returns void

reportValidity

select

setCustomValidity

  • setCustomValidity(message): 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

  • setRangeText(replacement, start?, end?, selectMode?): void

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

    Parameters

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

    Returns void

setSelectionRange

  • setSelectionRange(start, end, direction?): void

  • Sets the text selection range of the control

    Parameters

    • start: number
    • end: number
    • direction: SelectionRangeDirection

    Returns void