StringComponent

component

Creates form input for strings. Based on the input values different kinds of inputs will be generated.

Implements ControlValueAccessor so it can be used within Angular forms.

Example :

<!-- string input validating input to be between 5 and 10 characters -->

<yuv-string [minLength]="5" [maxLength]="10"></yuv-string>

<yuv-string [regex]="[0-9]*">

<yuv-string [rows]="10">

Component Metadata

Selector: yuv-string

Standalone: Yes

Implements: ControlValueAccessor, AfterViewInit, OnInit, OnDestroy

Inputs

rows

Type: number

Setting rows to more than 1 will generate a textarea instead of an input tag and apply the rows property to it

autofocus

Type: any

Default Value: false

Enable autofucus for the input (default: false)

classifications

Type: string[], string[] | undefined

Default Value: [], \{ transform: (value) => value ?? [] \}

Additional semantics for the form element. Possible values are email (validates and creates a link to send an email once there is a valid email address) and url (validates and creates a link to an URL typed into the form element).

maxLength

Type: number | undefined

Default Value: undefined

Maximum number of characters

minLength

Type: number | undefined

Default Value: undefined

Minimal number of characters

multiselect

Type: any

Default Value: false

Indicator that multiple strings could be inserted, they will be rendered as chips (default: false).

readonly

Type: any

Default Value: false

Will prevent the input from being changed (default: false)

regex

Type: string | undefined

Default Value: undefined

Regular expression to validate the input value against

situation

Type: string | undefined

Default Value: undefined

Possibles values are EDIT (default),SEARCH,CREATE. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.

disabled

Type: BooleanInput

placeholder

Type: string

required

Type: BooleanInput

Properties

classifiytionIcons

Type: object

Default Value: \{ email: 'email', url: 'language', phone: 'call' \}

classifyLink

Type: unknown

Default Value: computed(() => \{ const classifications = this.classifications(); if (!classifications.length) return undefined; const link = this.#classificationLinks.find((entry) => classifications.includes(entry.classification)); return link && \{ ...link, isUrl: link.classification === Classification.STRING_URL \}; \})

Link configuration of the first matching classification, extended by what the template needs.

fc

Type: unknown

Default Value: new FormControl<string | string[] | undefined>(undefined)

formatedValue

Type: FormattedMailTo

linkHref

Type: unknown

Default Value: computed(() => \{ const link = this.classifyLink(); const value = this.#formattedValue(); if (!link || value === undefined) return ''; if (!link.isUrl) return link.hrefPrefix + value; // A url link addresses exactly one location, so multi valued fields render the plain icon. return Utils.toAbsoluteUrl(Array.isArray(value) ? (value.length === 1 ? value[0] : '') : value); \})

Href of the classification link, empty whenever the current value cannot be linked.

linkLabelValue

Type: unknown

Default Value: computed(() => \{ const link = this.classifyLink(); if (!link) return ''; if (link.isUrl) return this.linkHref(); const formattedValue = this.#formattedValue(); return typeof formattedValue === 'string' ? formattedValue : ''; \})

Value interpolated into the link’s aria-label: the resolved URL, or the plain address.

maxEntryCountIfInvalid

Type: number

ngControl

Type: unknown

Default Value: injectNgControl(this)

propagateChange

Type: unknown

Default Value: () => \{...\}

separatorKeysCodes

Type: unknown

Default Value: [ENTER, COMMA] as const

urlSchemeHint

Type: unknown

Default Value: computed(() => \{ if (!this.classifyLink()?.isUrl) return false; const value = this.value; const entries = Array.isArray(value) ? value : [value]; return entries.some((entry) => Utils.isValidUrl(entry) && !Utils.hasUrlScheme(entry)); \})

Whether opening the link would complete a scheme-less address with http://.

valid

Type: unknown

Default Value: false

validationErrors

Type: literal type[]

Default Value: []

autofilled

Type: boolean

controlType

Type: string

disableAutomaticLabeling

Type: boolean

stateChanges

Type: unknown

Default Value: new Subject<void>()

userAriaDescribedBy

Type: string

Methods

chipsAdd

chipsAdd(event: MatChipInputEvent): void

Arguments

Name	Type	Description
event	MatChipInputEvent

chipsEdit

chipsEdit(v: string, event: MatChipEditedEvent): void

Arguments

Name	Type	Description
v	string
event	MatChipEditedEvent

chipsRemove

chipsRemove(v: string): void

Arguments

Name	Type	Description
v	string

onBlur

onBlur(): void

registerOnChange

registerOnChange(fn: any): void

Arguments

Name	Type	Description
fn	any

registerOnTouched

registerOnTouched(): void

setDisabledState

setDisabledState(isDisabled: boolean): void

Arguments

Name	Type	Description
isDisabled	boolean

writeValue

writeValue(value: string | string[]): void

Arguments

Name	Type	Description
value	string | string[]

onContainerClick

onContainerClick(event: MouseEvent): void

Arguments

Name	Type	Description
event	MouseEvent

onFocusIn

onFocusIn(): void

onFocusout

onFocusout(): void

onNgOnDestroy

onNgOnDestroy(): void

setDescribedByIds

setDescribedByIds(ids: string[]): void

Arguments

Name	Type	Description
ids	string[]