2016-08-25 2 views
34

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

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

+2

Еще один момент, чтобы рассмотреть это реактивная форма синхронные и управляемых с помощью шаблонов форм является асинхронным. У обеих форм есть свои недостатки и сильные стороны. Поэтому перед тем, как выбрать, какую форму использовать в вашем приложении, нужно учитывать пару вещей. сложность приложения и т. д. Вы также можете использовать обе формы в приложении. –

ответ

47

Шаблон Driven формы Особенности

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

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

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

Существует хорошее обсуждение двух и выгод/недостатков здесь:

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

+1

Хотя эта ссылка может ответить на вопрос, лучше включить здесь основные части ответа и предоставить ссылку для справки. Ответные ссылки могут стать недействительными, если связанная страница изменится. - [Из обзора] (/ review/low-quality-posts/18962902) – Alexander

10

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

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

Эта статья является хорошим справочником об этом: Angular 2 Forms - Template Driven and Model Driven Approaches

Смежные вопросы