• 100001

Я хотел бы знать практическую разницу между ними, не разницу в синтаксисе (очевидно), а в практическом использовании и в том, какой подход дает больше преимуществ в разных сценариях. Кроме того, есть ли выигрыш в производительности при выборе одного по сравнению с другим? И если да, то почему?

gdyrrahitis

Ответов: 6

Ответы (6)

Функции шаблонных форм

  • Простота использования
  • Подходит для простых сценариев и не работает для сложных сценариев
  • Аналогично AngularJS
  • Двусторонняя привязка данных (с использованием синтаксиса [(NgModel)])
  • Минимальный код компонента
  • Автоматическое отслеживание формы и ее данных (обрабатывается Angular)
  • Еще одна проблема - модульное тестирование

Характеристики реактивных форм

  • Более гибкий, но требует большой практики
  • Обрабатывает любые сложные сценарии
  • Привязка данных не выполняется (неизменяемая модель данных предпочитается большинством разработчиков)
  • Больше кода компонента и меньше разметки HTML
  • Реактивные преобразования могут быть сделаны возможными, например,
    • Обработка события в зависимости от времени задержки
    • Обработка событий, когда компоненты различны до изменения
    • Динамическое добавление элементов
  • Более простое модульное тестирование

Формы на основе шаблонов:

импортировано с использованием FormsModule

Формы, созданные с помощью директивы ngModel, могут быть протестированы только в сквозном тесте, потому что для этого требуется наличие DOM

Значение формы будет доступно в двух разных местах: модель представления, то есть ngModel

Проверка формы, поскольку мы добавляем все больше и больше тегов-валидаторов в поле или когда мы начинаем добавлять сложные кросс-полевые проверки, читаемость формы уменьшается

Реактивные формы:

Может обычно использоваться для крупномасштабных приложений

сложную логику проверки на самом деле проще реализовать

импортировано с использованием ReactiveFormsModule

Значение формы будет доступно в двух разных местах: модель представления и FormGroup

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

Использование наблюдаемых для реактивного программирования

Например: поле пароля и поле подтверждения пароля должны совпадать

Реактивный способ: нам просто нужно написать функцию и подключить ее к FormControl

Метод, управляемый шаблонами: нам нужно определить директиву и каким-то образом передать ей значение двух полей

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Я думаю, что это обсуждение кода, стратегии и взаимодействия с пользователем.

Таким образом, мы меняемся с подхода , основанного на шаблоне,, который проще работать с ним, на реактивный (в подходе на основе модели) для предоставления us больше контроля, что приводит к лучшей тестируемой форме за счет использования развязки между HTML (здесь может работать команда разработчиков / CSS) и бизнес-правилами компонентов (члены-специалисты angular / js) и улучшать пользовательский интерфейс с такими функциями, как реактивные преобразования, коррелированные проверки и обработка сложных сценариев как правила проверки времени выполнения и дублирование динамических полей.

Эта статья - хорошее упоминание об этом: Angular 2 Forms - подходы на основе шаблонов и моделей

Вот сводка сравнения между шаблонными и реактивными формами, хорошо объясненная DeborahK (Дебора Курата), enter image description here

Самый простой способ узнать разницу между реактивными формами и формами на основе шаблонов

Я могу сказать, если вы хотите большего контроля и масштабируемости, используйте реактивные формы

enter image description here

Реактивные формы:

  • многоразовые,
  • более надежный,
  • тестируемый,
  • более масштабируемый

Формы на основе шаблонов:

  • легко добавить,
  • менее масштабируемый,
  • основные требования к форме

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

Есть угловая оф.ссылка

2022 WebDevInsider