Class IgcInputComponent

igc-input

prefix - Renders content before the input.

suffix - Renders content after input.

helper-text - Renders content below the input.

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

type-mismatch - Renders content when the a type url/email input pattern validation fails.

pattern-mismatch - Renders content when the pattern validation fails.

too-long - Renders content when the maxlength validation fails.

too-short - Renders content when the minlength validation fails.

range-overflow - Renders content when the max validation fails.

range-underflow - Renders content when the min validation fails.

step-mismatch - Renders content when the step 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 input receives user input.

igcChange - Emitted when the control's checked state changes.

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

  • IgcInputBaseComponent
    • IgcInputComponent

Properties

autocomplete: string

The autocomplete attribute of the control.

autofocus: boolean

The autofocus attribute of the control.

disabled: boolean

The disabled state of the component.

false
inputMode: string

The input mode attribute of the control. See relevant MDN article

inputmode

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.

placeholder: string

The placeholder attribute of the control.

readOnly: boolean = false

Makes the control a readonly field.

readonly

tabIndex: number = 0
type: "number" | "search" | "text" | "tel" | "email" | "url" | "password" = 'text'

The type attribute of the control.

validateOnly: boolean = false

Enables validation rules to be evaluated without restricting user input. This applies to the maxLength property for string-type inputs or allows spin buttons to exceed the predefined min/max limits for number-type inputs.

validate-only

Accessors

  • set max(value: undefined | number): void

    The max attribute of the control.

    Parameters

    • value: undefined | number

    Returns void

  • set maxLength(value: undefined | number): void

    The maximum string length of the control.

    maxlength

    Parameters

    • value: undefined | number

    Returns void

  • set min(value: undefined | number): void

    The min attribute of the control.

    Parameters

    • value: undefined | number

    Returns void

  • set minLength(value: undefined | number): void

    The minimum string length required by the control.

    minlength

    Parameters

    • value: undefined | number

    Returns void

  • set pattern(value: undefined | string): void

    The pattern attribute of the control.

    Parameters

    • value: undefined | string

    Returns void

  • set required(value: boolean): void

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

    false
    

    Parameters

    • value: boolean

    Returns void

  • set step(value: undefined | number): void

    The step attribute of the control.

    Parameters

    • value: undefined | number

    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.

    Returns string

  • set value(value: string): void

    The value of the control.

    Parameters

    • value: 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 input.

    Parameters

    • replacement: string
    • start: number
    • end: number
    • selectMode: RangeTextSelectMode = 'preserve'

    Returns void

  • Sets the text selection range of the control

    Parameters

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

    Returns void

  • Decrements the numeric value of the input by one or more steps.

    Parameters

    • n: number

    Returns void