OtpInputComponent

Defined in: components/otp-input/otp-input.component.ts:55

A multi-field input component that captures user input one character at a time.

Since

1.3.0

Author

Simon Kovtyk

Implements

• ControlValueAccessor
• Validator
• AfterViewInit

Constructors

Constructor

new OtpInputComponent(): OtpInputComponent;

Defined in: components/otp-input/otp-input.component.ts:86

Returns

OtpInputComponent

Properties

Property	Modifier	Type	Defined in
accepts	readonly	Signal<string[] | undefined>	components/otp-input/otp-input.component.ts:78
autoFocus	readonly	InputSignalWithTransform<boolean, unknown>	components/otp-input/otp-input.component.ts:80
isDisabled	readonly	InputSignalWithTransform<boolean, unknown>	components/otp-input/otp-input.component.ts:70
length	readonly	InputSignal<number>	components/otp-input/otp-input.component.ts:74
placeholder	readonly	InputSignal<string | undefined>	components/otp-input/otp-input.component.ts:82
selectChange	readonly	OutputEmitterRef<void>	components/otp-input/otp-input.component.ts:84
value	readonly	InputSignal<string | null>	components/otp-input/otp-input.component.ts:72

Methods

ngAfterViewInit()

ngAfterViewInit(): void;

Defined in: components/otp-input/otp-input.component.ts:238

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

Returns

void

Implementation of

AfterViewInit.ngAfterViewInit

---

registerOnChange()

registerOnChange(callback): void;

Defined in: components/otp-input/otp-input.component.ts:202

Parameters

Parameter	Type
callback	(value) => unknown

Returns

void

Description

Registers a callback function that is called when the control's value changes in the UI.

This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

Usage Notes

Store the change function

The following example stores the provided function as an internal method.

registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}

When the value changes in the UI, call the registered function to allow the forms API to update itself:

host: {
   '(change)': '_onChange($event.target.value)'
}

Implementation of

ControlValueAccessor.registerOnChange

---

registerOnTouched()

registerOnTouched(callback): void;

Defined in: components/otp-input/otp-input.component.ts:206

Parameters

Parameter	Type
callback	() => void

Returns

void

Description

Registers a callback function that is called by the forms API on initialization to update the form model on blur.

When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

Usage Notes

Store the callback function

The following example stores the provided function as an internal method.

registerOnTouched(fn: any): void {
  this._onTouched = fn;
}

On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

host: {
   '(blur)': '_onTouched()'
}

Implementation of

ControlValueAccessor.registerOnTouched

---

registerOnValidatorChange()

registerOnValidatorChange(callback): void;

Defined in: components/otp-input/otp-input.component.ts:218

Parameters

Parameter	Type
callback	() => void

Returns

void

Description

Registers a callback function to call when the validator inputs change.

Implementation of

Validator.registerOnValidatorChange

---

restoreFocus()

restoreFocus(direction?): void;

Defined in: components/otp-input/otp-input.component.ts:178

Restores focus to a specific cell based on the given direction (forward, backward, or current)

Parameters

Parameter	Type	Description
direction?	"backward" | "forward" | "current"	The direction to restore focus: "forward" to the next cell, "backward" to the previous cell, or "current" to the current cell

Returns

void

Since

1.0.0

Author

Simon Kovtyk

---

setChar()

setChar(char): void;

Defined in: components/otp-input/otp-input.component.ts:193

Sets char to the cell

Parameters

Parameter	Type	Description
char	string	The character to set in the current cell

Returns

void

Since

1.0.0

Author

Simon Kovtyk

---

setDisabledState()

setDisabledState(isDisabled): void;

Defined in: components/otp-input/otp-input.component.ts:210

Parameters

Parameter	Type	Description
isDisabled	boolean	The disabled status to set on the element

Returns

void

Description

Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

Usage Notes

The following is an example of writing the disabled property to a native DOM element:

setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}

Implementation of

ControlValueAccessor.setDisabledState

---

validate()

validate(control): ValidationErrors | null;

Defined in: components/otp-input/otp-input.component.ts:230

Validates the current value against the allowed characters

Parameters

Parameter	Type	Description
control	AbstractControl	The form control to validate

Returns

ValidationErrors | null

An object with an invalid property set to true if the value contains invalid characters, or null if the value is valid

Since

1.0.0

Author

Simon Kovtyk

Implementation of

Validator.validate

---

writeValue()

writeValue(value): void;

Defined in: components/otp-input/otp-input.component.ts:214

Parameters

Parameter	Type
value	string

Returns

void

Description

Writes a new value to the element.

This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

Usage Notes

Write a value to the element

The following example writes a value to the native DOM element.

writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}

Implementation of

ControlValueAccessor.writeValue