Форма

Виджет Form позволяет проверять вводимые пользователем данные и выводить сообщение в случае неудачи проверки. Этот виджет может содержать любое количество полей формы, которые обычно являются полями ввода, такими как TextFields, Dropdown, RadioButton или Date/Time picker.

Например, вы можете использовать его для проверки того, указал ли пользователь действительный email и пароль. Это упрощает обработку пользовательского ввода и гарантирует правильность данных перед отправкой на сервер или локальным хранением.

Давайте посмотрим, как добавить виджет Form, создав пример регистрации. Вот как это выглядит:

Создание и проверка формы включает следующие шаги:

1. Добавление полей ввода
2. Добавление валидаций
3. Добавление действия проверки

Виджет формы может валидироваться только при наличии полей ввода. Вот пример добавления полей ввода для формы регистрации.

1. Сначала добавьте сам виджет Form из Элементов формы.
2. Внутри формы добавьте виджет Column из вкладки Layout Elements.
3. Теперь добавьте два текстовых поля (одно для электронной почты и одно для пароля).
4. Добавьте виджет Button, а затем добавьте действие Date/Time Picker для получения даты рождения.
5. Добавьте еще одну кнопку для проверки и отправки формы.

Вот как это выглядит:

Валидация — это процесс проверки корректности вводимых пользователем данных и обеспечения их соответствия определенным критериям или требованиям. Это может включать проверку наличия обязательных полей, проверку того, что значение находится в определенном диапазоне или формате, или проверку на соответствие пользовательскому шаблону.

После добавления полей ввода они будут доступны для проверки с помощью свойств виджета формы. Вот как это делается:

1. Выберите виджет Form и перейдите в раздел Properties Panel > Validate.
2. Определите текстовое поле, для которого вы хотите добавить валидацию, и установите флажок справа.
   1. В поле ввода Error Message укажите сообщение, которое будет отображаться (под текстовым полем), если пользователь оставит текстовое поле пустым.
   2. Вы также можете указать Min Required Character и Max Allowed Characters.
      1. Min Required Character: Это минимальный символ, необходимый для прохождения проверки.
         1. Например, если вы зададите значение 9, а пользователь введет значение a@a.com (это 6 символов), то проверка не пройдет, и будет выведено сообщение об ошибке.В поле ввода Minimum Character Error Text введите сообщение, которое будет отображаться, если пользователь не введет минимально необходимое количество символов.
      2. Максимальное количество разрешенных символов: Это максимальное количество символов, допустимое для прохождения проверки. Например, если вы зададите значение 15 и пользователь введет пароль, превышающий 15 символов, то проверка не пройдет, и будет выведено сообщение об ошибке.
         1. В поле ввода Max Allowed Characters Error Text введите сообщение, которое будет отображаться, если пользователь введет больше максимально допустимого количества символов.

1. Вы также можете выбрать проверку ввода с помощью наших предопределенных валидаторов или создать собственный. Для этого вы можете установить нужный вам валидатор текста.
   1. Если нужного валидатора нет в списке, вы можете выбрать Custom Regex и указать свой собственный Regex (Dart/JS). Вот несколько примеров Custom Regex:
   2. Также укажите сообщение в Invalid Text Error Text. Оно будет отображаться, если проверка пользовательского регекса не прошла.
2. Вы также можете добавить проверку на определенные действия, которые могут быть использованы внутри формы, такие как Date/Time Picker и PlacePicker. Для этого найдите название действия и поставьте галочку справа.
3. Теперь необходимо включить опцию Add Action on Error и установить соответствующий Action Type. Это действие будет срабатывать в случае ошибки проверки. Например, в данном случае, если форма отправлена без выбора даты рождения, вы можете добавить действие Show Snackbar, предлагающее пользователю выбрать дату.

О том, как добавить действие для проверки формы, вы узнаете на следующей странице.

Вместо того чтобы выводить сообщение об ошибке после того, как пользователь отправит форму, вы можете предоставлять обратную связь в реальном времени по мере ввода текста в виджете TextField, чтобы указать на ошибки валидации. Эта функция может быть особенно полезна для длинных форм, где она может сэкономить время и усилия пользователя.

Чтобы автоматически проверить форму, выберите TextField > перейдите на панель свойств > Add validations > и включите опцию Automatically Validate.

Вы также можете проверить форму, когда закончите вводить значение в текстовое поле, используя действие On Submit.

Чтобы проверить форму на TextField On Submit:

1. Выберите виджет TextField и выберите Actions на панели Properties (правое меню).
2. Нажмите кнопку + Добавить действие и убедитесь, что Тип действия установлен на On Submit.
3. Найдите и выберите действие Validate Form (в разделе UI Interactions).
4. Установите для параметра Select Form to Validate имя вашей формы.

Вы можете настроить внешний вид и поведение этого виджета с помощью различных свойств, доступных на панели свойств.

Узнайте, как показать или скрыть любой виджет с помощью свойства «Условная видимость».

Узнайте, как добавить отз

Узнайте, как добавить подложку и выравнивание к любому виджету.

По умолчанию виджет Form занимает все доступное пространство в горизонтальном направлении. Возможно, вы захотите ограничить его ширину, чтобы она соответствовала вашему дизайну. Посмотрите, как изменить ширину этого виджета.