OrionPhone

<o-phone> affiche un champ de saisie de numéro de téléphone.

Le numéro sera formatté en fonction du pays sélectionné.

Usage

PhoneMobile PhoneFlag

Pays préférés

Vous pouvez, en utilisant une référence vue sur orion phone, accèder à l'instance de l'orion select _countrypour pouvoir renseigner vos pays favoris.

Pour ajouter vos pays favoris, vous devez utiliser le type Orion.Country. Vous pourrez trouver la liste des pays ici et ainsi obtenir l'objet Orion complet.

PhonePlayground

VModels

vModelVModelType = undefined

phoneCountryCodestring | undefined = undefined

phoneNumberstring | undefined = undefined

Props

autofocusboolean = undefined

clearableboolean = undefined

clearToNullboolean = undefined

disabledboolean = undefined

donetypingnumber = undefined

flagboolean = undefined

forceLabelFloatingboolean = undefined

inheritValidationStateboolean = undefined

labelstring = undefined

mobileboolean = undefined

placeholderstring = undefined

prefixFontIconstring = undefined

prefixIconOrion.Icon = undefined

readonlyboolean = undefined

requiredboolean = undefined

selectOnFocusboolean = undefined

sizeOrion.Size = 'md'

suffixFontIconstring = undefined

suffixIconOrion.Icon = undefined

typestring = 'tel'

validationstring | ((val: any) => boolean) | Orion.Validator.Rule | Orion.Validation.Rule | boolean = undefined

validationErrorMessagestring = undefined

Events

focus

FocusEvent

blur

FocusEvent

input

T

change

T

clear

PublicInstance

isValidMobile

() => boolean

_country

() => {
	getSearchTerm: () => string | undefined;
	setSearchTerm: (val?: string) => string | undefined;
	setFavoritesOptions: (val: unknown[]) => unknown[];
	triggerSearchAsync: (term?: string) => Promise<void>;
	togglePopover: () => void;
	blur: import("lodash").DebouncedFuncLeading<(e?: FocusEvent, selection?: boolean) => false | undefined>;
	popoverIsShown: () => boolean | undefined;
	hasBeenFocus: () => boolean;
	isFocus: () => boolean;
	focus: () => void;
	clear: () => void;
	setHasBeenFocus: (value: boolean) => void;
	isValid: () => boolean;
	_input: () => HTMLInputElement | undefined;
	sharedState: () => {
		hasBeenFocus: boolean;
		isFocus: boolean;
		isAutoFilled: boolean;
	};
} | undefined

_orionInput

() => (HTMLInputElement & {
	valueDisplay: () => string;
	hasBeenFocus: () => boolean;
	isFocus: () => boolean;
	focus: () => void;
	blur: import("lodash").DebouncedFuncLeading<() => void>;
	clear: () => void;
	setHasBeenFocus: (value: boolean) => void;
	isValid: () => boolean;
	_input: () => HTMLInputElement | undefined;
	sharedState: () => {
		hasBeenFocus: boolean;
		isFocus: boolean;
		isAutoFilled: boolean;
	};
}) | undefined

hasBeenFocus

() => boolean

isFocus

() => boolean

focus

() => void

blur

Lodash.debounce

clear

() => void

setHasBeenFocus

(value: boolean) => void

isValid

() => boolean

_input

() => HTMLInputElement | undefined

sharedState

() => {
	hasBeenFocus: boolean;
	isFocus: boolean;
	isAutoFilled: boolean;
}