Поля ввода и метки

Любое поле ввода имеет явное назначение — его нужно заполнить.
Стиль поля показывает, какую информацию нужно ввести. Все поля ввода подразделяются на:

• текстовые,
• числовые,
• поля ввода даты и времени,
• специализированные.

Значение поля

Введенное значение для полей ввода устанавливается опцией 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;
},