ngx-dynamic-form-builder

Короткое описание

ngx-dynamic-form-builder — это моя библиотека для Angular, созданная для динамического построения форм. Она позволяет генерировать структуры FormGroup на основе классов и метаданных, используя Angular FormBuilder вместе с class-transformer и class-validator. Поддерживаются мультиязычные сообщения об ошибках.

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

Ссылка на репозиторий: https://github.com/EndyKaufman/ngx-dynamic-form-builder

Пакет на npm

ngx-dynamic-form-builder, версия 2.4.1 с поддержкой Angular 12–14.

История создания и мотивация

Когда Angular только появился и внедрили реактивные формы, я столкнулся с задачей: как использовать классы с декораторами валидации, которые я писал на NestJS в контроллерах, на фронтенде.

• Существующих решений я не нашёл.
• Тогда я решил написать обёртку, которая превращает валидаторы классов в валидаторы Angular Reactive Forms.
• В процессе библиотека многократно правилась по багам, которые присылало сообщество, и активно использовалась мной во всех проектах.

Главные преимущества моего подхода:

• Серверные DTO можно было шарить через npm-библиотеки на фронт.
• Валидации оставались типобезопасными и переиспользуемыми между бэком и фронтом.
• Работа с формами стала значительно проще, особенно когда бэк использовал те же классы DTO.

Основные возможности библиотеки

• Генерация Angular Reactive Forms (FormGroup, FormControl, FormArray) из классов с декораторами
• Валидация с поддержкой class-validator-multi-lang, включая кастомные валидаторы
• Интеграция с class-transformer-global-storage для извлечения метаданных типов и построения форм
• Работа с массивами, вложенными объектами и типобезопасными моделями

Пример использования:

// Модель данных
@Exclude()
class Company {
  @Expose()
  id: number;

  @Validate(TextLengthMore15)
  @IsNotEmpty()
  @Expose()
  name: string;
}

// Создание формы
const fb = new DynamicFormBuilder();
this.form = fb.rootFormGroup(Company, { name: '' });

Тестовая интеграция

Я сделал демо-приложение и StackBlitz-пример, чтобы можно было протестировать генерацию форм прямо в браузере.

Статистика репозитория

Этапы разработки библиотеки

• 2018 — начальный функционал (v0.x)
  Генератор форм без жёсткой привязки к Angular 9+, базовая поддержка class-transformer и валидаций.
• 2019–2021 — развитие API
  Улучшение поддержки валидаций и вложенных структур.
• 2022 — крупное переписывание API (v2.0)
  Полностью переписанный код, частичная обратная совместимость, строгий контроль @Expose/@Exclude.
• 2023 — стабильная версия 2.4.1
  Поддержка Angular 16 и Nx16, интеграция тестов, улучшения обработки ошибок.

Временные затраты

В сумме: около 12–18 месяцев активной разработки, включая major-рефакторинг и интеграцию типов/валидаций.

Текущее использование и контекст

Сейчас я чаще использую Formly, где кастомизация форм и отображение ошибок DTO реализуется через возможности самой Formly.

Но библиотека остаётся актуальной, когда Formly не разрешено использовать работодателем.

Если бэк использует те же DTO, библиотека сильно упрощает работу с валидаторами и формами.

Статус: пока на паузе. Я планировал обновить библиотеку под последние версии Angular, но с появлением сигнальных форм пока решил отложить.

Применение библиотеки

• Проекты с динамическими объектами модели, где формы строятся на основе DTO-моделей
• Формы с сложной валидацией и многоязычными сообщениями об ошибках
• Админ-панели, CRUD-формы, требующие типобезопасности и масштабируемости
• Сценарии, где Formly использовать запрещено, но нужен типобезопасный фронт

Итог

ngx-dynamic-form-builder — моя библиотека для Angular, обеспечивающая типобезопасное создание динамических форм на основе классов с декораторами, поддержку валидаций и мультиязычных сообщений.

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