Значение поля ввода.

ТИП:
T|null

Примеры

Сохраняем данные о пользователе и текущее время при отправке формы.

<form action="Auth.php" name="form">
    <Controls.input:Text bind:value="_login"/>
    <Controls.input:Password bind:value="_password"/>
    <Controls.buttons:Button on:click="_saveUser()" caption="Отправить"/>
</form>

export class Form extends Control<IControlOptions, void> {
    private _login: string = '';
    private _password: string = '';
    private _server: Server = new Server();

    private _saveUser() {
        this._server.saveData({
            date: new Date(),
            login: this._login,
            password: this._password
        });

        this._children.form.submit();
    }
}

Примечание

При установке опции value в контроле ввода, отображаемое значение всегда будет соответствовать её значению. В этом случае родительский контрол управляет отображаемым значением. Например, вы можете менять значение по событию valueChanged:

<Controls:input:Text value="{{_value}}" on:valueChanged="_handleValueChange()"/>

export class Form extends Control<IControlOptions, void> {
    private _value: string = '';

    private _handleValueChange(event: SyntheticEvent<Event>, value) {
        this._value = value;
    }
}

Пример можно упростить, воспользовавшись синтаксисом шаблонизатора bind:

<Controls:input:Text bind:value="_value"/>

Альтернатива - не задавать опцию value. Значение контрола будет кешироваться в контроле ввода:

<Controls.input:Text/>

Не рекомендуем использовать опцию для изменения поведения обработки ввода. Такой подход увеличит время перерисовки.

Плохо:

<Controls:input:Text value="{{_value}}" on:valueChanged="_handleValueChange()"/>

export class Form extends Control<IControlOptions, void> {
    private _value: string = '';

    private _handleValueChange(event: SyntheticEvent<Event>, value) {
        this._value = value.toUpperCase();
    }
}

Лучшим подходом будет воспользоваться опцией inputCallback.

Хорошо:

<Controls:input:Text bind:value="{{_value}}" inputCallback="{{_toUpperCase}}"/>

class Form extends Control<IControlOptions, void> {
    private _value: string = '';

    private _toUpperCase(data) {
        return {
            position: data.position,
            value: data.value.toUpperCase()
        }
    }
}

См. также

<a class="link-doclet member-item-link" data-element="7004718" data-kind="event" data-owner="7004674" data-path="Controls/input/Text/events/valueChanged/">valueChanged</a>
<a class="link-doclet member-item-link" data-element="7004719" data-kind="event" data-owner="7004674" data-path="Controls/input/Text/events/inputCompleted/">inputCompleted</a>
10/23/2020Красильников А.С.