emailField

ДЕМО

emailField - это стандартное поле ввода textField, которое принимает только адреса электронной почты в качестве входных данных.

XML-элемент

emailField

Java-класс

JmixEmailField

Атрибуты

id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - autoselect - classNames - clearButtonVisible - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxLength - maxWidth - minHeight - minLength - minWidth - pattern - placeholder - property - readOnly - required - requiredMessage - tabIndex - themeNames - title - value - valueChangeMode - valueChangeTimeout - visible - width

Обработчики

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler - validator

Элементы

prefix - suffix - tooltip - validator

Основы

Компонент emailField - это специализированное поле ввода, разработанное для сбора и проверки адресов электронной почты. Оно расширяет базовый компонент textField, добавляя специальные функции и проверки, адаптированные для адресов электронной почты.

Пример использования emailField:

<emailField errorMessage="Enter a valid email address"
            value="john.doe@email.com"
            clearButtonVisible="true"
            label="Email address"
            width="15em"/>
email field basics

Привязка данных

ДЕМО

Привязка данных означает связывание визуального компонента с контейнером данных. Изменения в визуальном компоненте или соответствующем контейнере данных могут вызывать обновления друг друга. Смотрите Использование компонентов данных для получения дополнительной информации.

Следующий пример создает emailField, связанный с данными.

<data>
    <instance class="com.company.onboarding.entity.Customer" id="customerDc"> (1)
        <fetchPlan extends="_base"/> (2)
        <loader id="customerDl"/>
    </instance>
</data>
<layout>
    <emailField dataContainer="customerDc"
                property="email"
                label="Email"/> (3)
</layout>
1 InstanceContainer для сущности Customer.
2 Встроенный план выборки экземпляра сущности, находящегося в контейнере.
3 Привязка компонента к контейнеру данных и свойству. Атрибут dataContainer содержит ссылку на контейнер данных customerDc, а атрибут property ссылается на атрибут сущности email.

Варианты темы

ДЕМО

Используйте атрибут themeNames для настройки темы компонента.

Вариант Описание Поддерживается в

small

Уменьшает размер компонента.

Aura, Lumo

align-left

Выравнивает значение поля по левому краю.

Aura, Lumo

align-center

Выравнивает значение поля по центру.

Aura, Lumo

align-right

Выравнивает значение поля по правому краю.

Aura, Lumo

helper-above-field

Размещает вспомогательный текст над полем, под меткой.

Aura, Lumo

Валидация

Чтобы проверить значения, введенные в компонент integerField, вы можете использовать валидатор в элементе validators.

Доступны следующие предопределенные валидаторы для emailField:

XML-элемент

validators

Предопределенные валидаторы

custom - email - notBlank - notEmpty - notNull - regexp - size

Смотрите также

Дополнительную информацию смотрите в документации Vaadin.