OrionPhone
<o-phone>
displays a phone number field.
The number will be formatted depending on the selected country.
Usage
PhoneMobile PhoneFlag
Favorites countries
Using a reference seen on orion phone, you can access orion select instance _country
to enter your favorite countries.
You have to use the Orion.Country
type to create your list of favorite. You can find all country here.
PhonePlayground
VModels
Name
vModel
VModelType = undefined
phoneCountryCode
string | undefined = undefined
phoneNumber
string | undefined = undefined
Props
Name
autofocus
boolean = undefined
clearable
boolean = undefined
clearToNull
boolean = undefined
disabled
boolean = undefined
donetyping
number = undefined
flag
boolean = undefined
forceLabelFloating
boolean = undefined
inheritValidationState
boolean = undefined
label
string = undefined
mobile
boolean = undefined
placeholder
string = undefined
prefixFontIcon
string = undefined
prefixIcon
Orion.Icon = undefined
readonly
boolean = undefined
required
boolean = undefined
selectOnFocus
boolean = undefined
size
Orion.Size = 'md'
suffixFontIcon
string = undefined
suffixIcon
Orion.Icon = undefined
type
any = 'tel'
validation
any = undefined
validationErrorMessage
string = undefined
PublicInstance
Name
Type
isValidMobile
() => boolean
_country
() => {
getSearchTerm: () => string | undefined;
setSearchTerm: (val?: string) => string | undefined;
setFavoritesOptions: (val: unknown[]) => unknown[];
triggerSearchAsync: (term?: string) => Promise<void>;
blur: import("lodash").DebouncedFuncLeading<(e?: FocusEvent, selection?: boolean) => false | 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;
}