mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00

Adds a new component `ion-input-otp` which provides the OTP input functionality - Displays as an input group with multiple boxes accepting a single character - Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display - Supports changing the displayed keyboard using the `inputmode` property - Accepts a `length` property to control the number of input boxes - Accepts the following properties to change the design: `fill`, `shape`, `size`, `color` - Accepts a `separators` property to show a separator between 1 or more input boxes - Supports the `disabled`, `readonly` and invalid states - Supports limiting the accepted input via the `pattern` property - Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus` - Exposes the following method: `setFocus` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Shane <shane@shanessite.net>
27 lines
810 B
TypeScript
27 lines
810 B
TypeScript
import { ElementRef, Injector, Directive, HostListener } from '@angular/core';
|
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
import { ValueAccessor } from '@ionic/angular/common';
|
|
|
|
@Directive({
|
|
selector: 'ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar',
|
|
providers: [
|
|
{
|
|
provide: NG_VALUE_ACCESSOR,
|
|
useExisting: TextValueAccessorDirective,
|
|
multi: true,
|
|
},
|
|
],
|
|
})
|
|
export class TextValueAccessorDirective extends ValueAccessor {
|
|
constructor(injector: Injector, el: ElementRef) {
|
|
super(injector, el);
|
|
}
|
|
|
|
@HostListener('ionInput', ['$event.target'])
|
|
_handleInputEvent(
|
|
el: HTMLIonInputElement | HTMLIonInputOtpElement | HTMLIonTextareaElement | HTMLIonSearchbarElement
|
|
): void {
|
|
this.handleValueChange(el, el.value);
|
|
}
|
|
}
|