Сброс формы

Особенности взаимодействия AutoNumeric с формами

При использовании AutoNumeric значения полей формы перестают быть «сырыми» строками и становятся управляемыми форматированными данными. Это означает, что стандартные механизмы сброса HTML-формы (form.reset()) не всегда приводят к ожидаемому результату в контексте числового форматирования. DOM-значение может вернуться к начальному состоянию, но внутреннее состояние AutoNumeric остаётся синхронизированным с предыдущим форматированным значением.

AutoNumeric хранит числовое значение отдельно от отображаемого. Внутреннее состояние включает:

отформатированное значение (то, что видно в input)
«сырое» значение (numeric string / number в зависимости от конфигурации)
настройки локали и форматирования

При сбросе формы важно учитывать все три уровня, иначе возникает рассинхронизация между визуальным представлением и внутренним состоянием экземпляра.

Стандартный reset формы и его ограничения

HTML-механизм сброса формы работает на уровне DOM:

form.reset();

При использовании AutoNumeric это приводит к восстановлению первоначального значения атрибута value у input-элемента, однако:

AutoNumeric не всегда автоматически пересчитывает формат
внутренний numeric-state может остаться прежним
визуальное значение может быть переформатировано некорректно после первого взаимодействия

Причина заключается в том, что AutoNumeric перехватывает ввод и перезаписывает отображение, а reset() не инициирует событий, которые триггерят перерасчёт форматирования.

Корректный сброс через API AutoNumeric

Библиотека предоставляет методы управления состоянием, которые должны использоваться вместо или вместе со стандартным сбросом формы.

set() и setNumeric()

Основной способ сброса значения:

anElement.set(0);

или:

anElement.set('');

В зависимости от конфигурации:

0 используется для числового сброса
пустая строка применяется для очистки поля

Метод setNumeric() позволяет работать напрямую с числовым представлением:

anElement.setNumeric(0);

Сброс нескольких полей формы

При работе с формами, содержащими множество AutoNumeric-инстансов, требуется хранить ссылки на все экземпляры:

const autoNumericInstances = AutoNumeric.multiple('.autoNumeric');

Сброс выполняется через итерацию:

autoNumericInstances.forEach((instance) => {
    instance.set(0);
});

Такой подход гарантирует синхронизацию внутреннего состояния всех полей.

Полное разрушение и пересоздание состояния

В некоторых сценариях требуется не просто очистка значений, а полный возврат к исходному состоянию DOM-элементов.

Используется метод remove():

AutoNumeric.getAutoNumericElement(input).remove();

После удаления экземпляра поле снова становится обычным input без форматирования.

Далее возможна повторная инициализация:

AutoNumeric.multiple('.autoNumeric');

Такой подход применяется при:

динамической смене конфигурации формы
переключении локалей
полной перезагрузке данных интерфейса

Сброс через reset + повторная синхронизация

Комбинированный подход применяется при необходимости сохранить HTML-reset поведение, но восстановить корректное форматирование.

form.reset();

AutoNumeric.getAutoNumericElements().forEach((instance) => {
    instance.refresh();
});

Метод refresh() заставляет AutoNumeric перечитать текущее значение input и применить форматирование согласно текущим настройкам.

Поведение при reset в зависимости от конфигурации

Некоторые настройки AutoNumeric влияют на то, как именно поле реагирует на очистку:

emptyInputBehavior

null — поле становится пустым
zero — сброс в 0
min — установка минимального значения
focus — поведение зависит от фокуса

При reset формы значение восстанавливается в соответствии с этим параметром.

unformatOnSubmit и его влияние

Если включена опция:

unformatOnSubmit: true

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

Сброс состояния при динамическом вводе

При использовании событийного управления значениями (например, через input, change, keyup) необходимо учитывать, что reset формы не вызывает всех событий, которые использует AutoNumeric для синхронизации.

Рекомендуемая последовательность:

Сброс формы
Явное обновление AutoNumeric-инстансов
При необходимости — повторная нормализация значений

form.reset();

requestAnimationFrame(() => {
    AutoNumeric.getAutoNumericElements().forEach((instance) => {
        instance.refresh();
    });
});

Очистка значений без reset формы

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

AutoNumeric.getAutoNumericElements().forEach((instance) => {
    instance.set('');
});

Такой подход предпочтителен при:

SPA-интерфейсах
модальных формах
повторном использовании компонентов

Работа с дефолтными значениями

Для восстановления первоначальных значений требуется хранение snapshot состояния:

const defaults = new Map();

AutoNumeric.getAutoNumericElements().forEach((instance) => {
    defaults.set(instance.domElement, instance.getNumber());
});

Далее сброс:

AutoNumeric.getAutoNumericElements().forEach((instance) => {
    instance.set(defaults.get(instance.domElement));
});

Особенности reset в React-подобных архитектурах

При использовании виртуального DOM стандартный form.reset() может конфликтовать с повторным рендерингом.

Типовой паттерн:

состояние формы хранится в state
AutoNumeric синхронизируется через эффекты
reset выполняется через обновление состояния

setFormState(initialState);

После этого AutoNumeric-инстансы обновляются через lifecycle-хук, который вызывает set() или refresh().

Потенциальные проблемы при сбросе

Наиболее частые несоответствия:

отображается старое форматированное значение после reset
input очищается, но внутреннее значение остаётся
при повторном вводе появляются некорректные разделители
нарушается локализация чисел

Причина почти всегда связана с отсутствием явного вызова API AutoNumeric после DOM reset.