Поля ввода и метки
Любое поле ввода имеет явное назначение — его нужно заполнить.
Стиль поля показывает, какую информацию нужно ввести. Все поля ввода подразделяются на:
- текстовые,
- числовые,
- поля ввода даты и времени,
- специализированные.
Значение поля
Введенное значение для полей ввода устанавливается опцией value. Тип введенного значения соответствует применённому полю.
Поля ввода не хранят введенные значения, они предназначены для отображения и передачи вводимой информации. В процессе ввода выполняются события с новым значением value
, которые обрабатываются на уровне родительского контрола.
Для синхронизации изменений значения поля ввода с его логическим родителем используют синхронизацию. Без этой настройки получаются поля ввода, в которое невозможно ничего ввести.
В следующем примере для поля ввода Controls/input:Text
связаны опция value
и свойство myText
.
// JavaScript
var myControl = Base.Control.extend({
_template: template,
myText: 'Hello, world!'
});
<!-- WML -->
<Controls.input:Text bind:value="myText" />
У полей ввода есть отступ между текстом и левой границей поля, из-за этой особенности при переключении в режим чтения может наблюдаться скачок текста.
Чтобы избежать этого, рекомендуется навесить css-класс controls-Input_negativeOffset_theme_{{_options.theme}} на поле ввода, который компенсирует отступ, сдвинув поле ввода влево. Это позволит тексту в режиме редактирования и в режиме чтения находиться на одной линии.
Индикатор поля ввода
Любому из перечисленных полей можно установить цветную метку с помощью значений опции tagStyle:
Изменение поведения обработки ввода
Стандартное поведение обработки введенного значения может не соответствовать требованиям поставленной задачи. Для таких случаев предусмотрена опция inputCallback.
В опцию передается функция, которая будет вызвана после основного процесса обработки входных данных.
Валидация вводимых данных
Проверяются введенные данные с помощью механизма валидации.
Валидация проводится с помощью контролов из библиотеки Controls/validate
.
Схема валидации представлена на следующем рисунке.
Рис.1. Схема валидации полей ввода.
Поле ввода передает валидатору значение опции value
.
Валидатор возвращает полю ввода результат — значение опции validationStatus.
В случае ошибки будет изменен стиль отображения поля, появится всплывающая подсказка с сообщением об ошибке. Всплывающая подсказка будет открываться контролом Controls/validate:InputContainer
.
Пример валидации поля Controls/input:Text
с помощью контрола валидации Controls/validate:Container
:
<Controls.validate:Container>
<ws:validators>
<ws:Function value="{{_phoneNumber}}">MyControl/MyValidator</ws:Function>
</ws:validators>
<ws:content>
<Controls.input:Text name="textBox" bind:value="_phoneNumber" />
</ws:content>
</Controls.validate:Container>
Стандартные валидаторы
- Controls/validate:isEmail — валидатор адресов электронной почты.
- Controls/validate:isValidDate — валидатор введенной даты.
- Controls/validate:isRequired — валидатор полей, обязательных к заполнению.
События ввода данных
Интересующие события:
- inputCompleted — срабатывает при завершении ввода (ухода фокуса / клик по кнопке
Enter
), - valueChanged — срабатывает при изменении значения
value
.
В обработчик приходит значение value
, при изменении — новое значение.
// JavaScript
<Controls.input:Text
...
on:valueChanged="_eventHandler()"
on:inputCompleted="_eventHandler()"
/>
<!-- WML -->
_eventHandler: function(e, value) {
this._eventResult = e.type + ': ' + value;
},