Сброс и предзаполнение форм

Slim.js — легковесная библиотека для построения компонентного интерфейса на JavaScript, ориентированная на декларативное создание UI и реактивное управление состоянием. Одной из частых задач при работе с веб-приложениями является управление формами: сброс их состояния и предзаполнение данными.

Директивы и атрибуты для форм

Slim.js использует декларативный синтаксис для связывания данных с элементами DOM. Основные атрибуты для работы с формами:

bind — связывает значение поля формы с переменной компонента. Например,

<input type="text" bind="userName">

Здесь значение userName в компоненте автоматически синхронизируется с содержимым поля ввода.

on — позволяет подписываться на события элементов формы, такие как submit, input, change. Например:

<form onsub mit="submitForm">

ref — создаёт ссылку на DOM-элемент для прямого доступа в методах компонента, что удобно для ручного сброса формы.

Сброс форм

Сброс формы в Slim.js можно реализовать несколькими способами:

1. Использование стандартного метода `reset` HTMLFormElement

Ссылка на форму через ref позволяет вызвать встроенный метод reset:

class MyForm extends Slim {
  submitForm(event) {
    event.preventDefault();
    console.log(this.userName);
    this.$refs.form.reset();
  }
}

<form ref="form" onsub mit="submitForm">
  <input type="text" bind="userName">
  <button type="submit">Отправить</button>
</form>

Метод reset возвращает все поля формы к исходным значениям, указанным в HTML.

2. Программный сброс через реактивные переменные

В Slim.js состояния полей можно хранить в переменных компонента и сбрасывать их напрямую:

class MyForm extends Slim {
  userName = '';

  resetForm() {
    this.userName = '';
  }
}

<input type="text" bind="userName">
<button type="button" oncl ick="resetForm">Сброс</button>

Такой подход позволяет контролировать значения без обращения к DOM и сохраняет реактивность данных.

Предзаполнение форм

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

1. Загрузка данных при инициализации компонента

class MyForm extends Slim {
  userName = '';
  email = '';

  connectedCallback() {
    super.connectedCallback();
    this.loadData();
  }

  loadData() {
    const data = { userName: 'Иван', email: 'ivan@example.com' };
    this.userName = data.userName;
    this.email = data.email;
  }
}

<form>
  <input type="text" bind="userName">
  <input type="email" bind="email">
</form>

Все поля автоматически обновятся при изменении значений переменных.

2. Асинхронная загрузка данных

Slim.js поддерживает реактивное обновление, поэтому можно подгружать данные с сервера и автоматически обновлять форму:

async loadData() {
  const response = await fetch('/api/user/123');
  const data = await response.json();
  this.userName = data.name;
  this.email = data.email;
}

Это позволяет динамически предзаполнять формы при открытии страницы или после действия пользователя.

Сброс и предзаполнение при динамических формах

Для динамических форм, где поля создаются через цикл или условные конструкции (#for, #if), важно синхронизировать реактивные переменные с DOM:

<div #for="field in fields">
  <input type="text" bind="field.value">
</div>
<button oncl ick="resetAll">Сброс</button>

resetAll() {
  this.fields.forEach(f => f.value = '');
}

Такой подход позволяет работать с любым количеством полей без жесткого связывания с DOM.