Каковы практические различия между шаблонными и реактивными формами?

157

Я читал о Angular2, новом Forms API, и кажется, что есть два подхода к формам, один из них - формы, управляемые шаблоном, другой - формы реагирующие или модели.

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

angular angular2-forms gdyrrahitis
источник
3
Еще один момент, на который следует обратить внимание: синхронная форма Reactive, а управляемая шаблоном форма асинхронная. Обе формы имеют свои слабые и сильные стороны. Поэтому необходимо рассмотреть несколько вещей, прежде чем выбирать, какую форму использовать в вашем приложении. сложность приложения и т. д. Вы также можете использовать обе формы в приложении.
Виджей Сингх

Ответы:

171

Возможности шаблонных форм

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

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

  • Более гибкий, но требует много практики
  • Обрабатывает любые сложные сценарии
  • Привязка данных не выполняется (неизменяемая модель данных предпочитается большинством разработчиков).
  • Больше кода компонента и меньше разметки HTML
  • Реактивные преобразования могут быть сделаны возможными, такими как
    • Обработка события на основе времени отката
    • Обработка событий, когда компоненты различны, пока не изменены
    • Добавление элементов динамически
  • Более простое модульное тестирование
Аравиндом
источник
1
Применимо ли юнит-тестирование для шаблонно-управляемых форм?
danger89
@ danger89 Я так думаю. Причина, по которой модульное тестирование является проблемой для шаблонно-управляемых форм, заключается в том, что они являются изменениями значений, а проверки достоверности являются асинхронными, что может вызвать головную боль, когда речь идет о модульном тестировании.
Алекс Локвуд
2
Я хотел бы добавить проверку формы в смесь выше. Шаблоны проверяются с помощью директив, в которых функция реагирует по функциям
Kieran
11
Что именно означает «Обрабатывает любые сложные сценарии» при обращении к реактивным формам? Исходя из AngularJS, я очень хорошо построил сложные формы, поэтому мне трудно понять, как управляемые шаблонами формы «терпят неудачу для сложных сценариев»
jtate
@jtate Я согласен с вами jtate, есть ли у кого-нибудь идеи о том, какой из них помогает улучшить производительность, время загрузки и т. д.?
Джоэл Джозеф
24

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

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

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

Ричард Ли
источник
24

Вот краткое изложение сравнения между шаблонно-управляемой и реактивной формами, хорошо объясненное Деборой (Дебора Курата), введите описание изображения здесь

Sajeetharan
источник
3

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

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

Шаблонно-управляемые формы:

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

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

Есть угловая официальная ссылка

fgul
источник
0

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

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

введите описание изображения здесь

abhinavxeon
источник
0

Шаблон управляемых форм:

импортируется с помощью FormsModule

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

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

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

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

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

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

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

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

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

Использование Observables для реактивного программирования

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

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

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

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

Лалитй-AIS
источник