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

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
источник