Які практичні відмінності між формами, що керуються шаблоном та реактивними?

Я читав про новий інтерфейс API Angular2, і, здається, існує два підходи до форм, один - форми, керовані шаблонами, інші - реактивні форми, керовані моделями.

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

Особливості форм шаблону

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

Особливості реактивних форм

• Більш гнучка, але потребує багато практики
• Обробляє будь-які складні сценарії
• Прив'язка даних не робиться (незмінна модель даних, що надається перевагою більшості розробників)
• Більше код компонента і менше розмітки HTML
• Можливі реактивні перетворення, такі як
  • Обробка події на основі часу дебютування
  • Обробка подій, коли компоненти чіткі до зміни
  • Додавання елементів динамічно
• Простіше тестування одиниць

Я думаю, що це обговорення коду , стратегії та досвіду користувача .

Підводячи підсумок, ми змінюємо для керованого шаблоном підходу, який легше працювати з ним, до реактивного (в модельному підході), щоб забезпечити нам більше контролю , що призводить до кращої перевіреної форми, використовуючи розв'язку між HTML (дизайн / Команда CSS може працювати тут) та ділові правила компонента (кутові / js спеціалісти) та покращувати досвід роботи з такими функціями, як реактивні перетворення, корельовані перевірки та обробляти складні сценарії як правила перевірки часу виконання та дублювання динамічних полів.

Ця стаття є гарною довідкою про неї: кутові 2 форми - керовані шаблонами та модельовані підходи

Ось підсумок порівняння між керованими шаблонами та реактивними формами, що добре пояснено DeborahK (Deborah Kurata),

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

• багаторазовий,
• більш міцний,
• перевіряється,
• більш масштабований

Форми, керовані шаблонами:

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

У підсумках , якщо форми дуже важливі для вашої програми, або у вашому додатку використовується реактивний зразок , ви повинні використовувати реактивні форми. Інакше у вашій програмі є основні та прості вимоги до форм, таких як вхід, ви повинні використовувати форми, керовані шаблонами .

Є кутове офіційне сполучення

Найпростіший спосіб дізнатися різницю між реактивними формами та формами, керованими шаблонами

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

Форми, керовані шаблоном:

імпортується за допомогою FormsModule

Форми, побудовані за директивою ngModel, можна перевірити лише в кінцевому тесті, оскільки для цього потрібна наявність DOM

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

Перевірка форми, оскільки ми додаємо все більше і більше тегів валідатора в поле або коли ми починаємо додавати складні перехресні перевірки, читабельність форми зменшується

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

Як правило, використовується для масштабних програм

складна логіка перевірки насправді простіша у виконанні

імпортується за допомогою ReactiveFormsModule

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

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

Використання спостережуваних речовин для реактивного програмування

Наприклад: поле пароля та поле підтвердження пароля повинні бути ідентичними

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

Шлях, керований шаблоном: нам потрібно визначити директиву і якось передати їй значення двох полів

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