Состояние валидации

FAST Element предоставляет мощный инструмент для создания настраиваемых веб-компонентов с использованием реактивного состояния. Одной из ключевых особенностей является управление состоянием валидации, что особенно важно при работе с формами и пользовательским вводом. Состояние валидации определяет, является ли текущий ввод корректным, некорректным или частично допустимым, и напрямую влияет на поведение компонента и его визуальное представление.

Основы состояния валидации

FAST Element использует реактивные свойства, чтобы отслеживать изменения данных и автоматически обновлять DOM. Для валидации чаще всего применяются свойства типа validity и invalidMessage, которые могут быть связаны с атрибутами элемента.

  • validity — объект, описывающий текущее состояние валидности, аналогичный встроенному ValidityState в HTML.
  • invalidMessage — строка, содержащая сообщение об ошибке, которое можно отображать в интерфейсе.

Пример декларации реактивного свойства для состояния валидации:

import { FASTElement, html, css, observable } from "@microsoft/fast-element";

export class MyInput extends FASTElement {
    @observable value = "";
    @observable invalidMessage = "";

    get validity() {
        return this.invalidMessage === "" ? { valid: true } : { valid: false };
    }

    validate() {
        if (this.value.trim() === "") {
            this.invalidMessage = "Поле не может быть пустым";
        } else {
            this.invalidMessage = "";
        }
    }
}

Здесь @observable делает свойства реактивными, а метод validate обновляет состояние валидации в зависимости от текущего значения value.

Связь состояния валидации с шаблоном

FAST Element позволяет связывать реактивные свойства с шаблоном через bindings, что обеспечивает автоматическое обновление интерфейса при изменении состояния.

const template = html<MyInput>`
  <label>
    Введите текст:
    <input
      type="text"
      value="${x => x.value}"
      @input="${(x, c) => { x.value = c.event.target.value; x.validate(); }}"
    />
  </label>
  <div class="error-message" ?hidden="${x => x.validity.valid}">
    ${x => x.invalidMessage}
  </div>
`;
  • Атрибут ?hidden управляет видимостью блока с ошибкой.
  • Вызов x.validate() на событие input обеспечивает динамическую проверку по мере ввода данных.

Использование встроенных валидаторов

FAST Element предоставляет возможность интеграции с встроенными валидаторами HTML, такими как required, pattern, minlength, maxlength. Для этого можно использовать сочетание ConstraintValidation и реактивного свойства.

validate() {
    const input = this.shadowRoot.querySelector("input");
    if (!input.checkValidity()) {
        this.invalidMessage = input.validationMessage;
    } else {
        this.invalidMessage = "";
    }
}

Использование встроенных валидаторов снижает объем кастомного кода и обеспечивает консистентное поведение с нативными элементами формы.

Кастомные валидаторы

Для сложной логики можно создавать кастомные валидаторы. Например, проверка уникальности значения:

async validateUnique() {
    const isUnique = await checkValueUniqueness(this.value);
    if (!isUnique) {
        this.invalidMessage = "Значение уже используется";
    } else {
        this.invalidMessage = "";
    }
}

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

Визуальная индикация состояния

Состояние валидации тесно связано с визуальной обратной связью. FAST Element позволяет динамически менять классы и стили через биндинги:

input:invalid {
    border-color: red;
}

input:valid {
    border-color: green;
}

В шаблоне можно привязать класс к состоянию валидации:

<input
  class="${x => x.validity.valid ? 'valid' : 'invalid'}"
  value="${x => x.value}"
  @input="${(x, c) => { x.value = c.event.target.value; x.validate(); }}"
/>

Таким образом, визуальная реакция на ошибки становится реактивной и согласованной с внутренним состоянием компонента.

Комбинирование нескольких валидаторов

Часто требуется проверять поле по нескольким правилам одновременно. В FAST Element можно создавать композитное состояние валидности, объединяя результаты разных валидаторов:

validate() {
    this.invalidMessage = "";

    if (this.value.length < 5) {
        this.invalidMessage = "Минимальная длина — 5 символов";
        return;
    }

    if (!/^[a-zA-Z]+$/.test(this.value)) {
        this.invalidMessage = "Допустимы только латинские буквы";
        return;
    }

    // Асинхронная проверка уникальности
    this.validateUnique();
}

Каждый шаг последовательно обновляет invalidMessage, а интерфейс автоматически отражает текущее состояние.

Резюме по состоянию валидации

  • Реактивные свойства позволяют хранить и отслеживать валидность данных.
  • Методы валидации могут быть синхронными и асинхронными.
  • Шаблонные биндинги обеспечивают динамическое отображение ошибок и визуальной индикации.
  • Комбинированные валидаторы упрощают создание сложных правил проверки.

Эффективное управление состоянием валидации в FAST Element обеспечивает согласованность данных, гибкость интерфейса и чистый, поддерживаемый код при создании кастомных компонентов форм.

Оглавление