Каковы различия между шаблонно-управляемыми формами и реактивными формами в угловых 2

Ответ 1

Как видно из вопроса Форма, управляемая шаблонами, это что-то, когда мы пишем логику, проверяем, контролируем все в части шаблона, которую я имею в виду в html-коде. Шаблон отвечает за настройку формы, проверки и т.д.

В то время как в случае Реактивных форм вся часть логической проверки в стороне контроллера означает в файле typescript file/class. Для реактивного подхода вы делаете все это в коде в компоненте. Менее шумный подход

Возможности шаблонов Driven Forms   

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

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

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

Ответ 2

При использовании подхода, основанного на шаблонах, вы в основном применяете директивы, такие как ngModel, в своем шаблоне. На основании этих директив Angular будет создавать объекты formcontrol. Этот подход хорош для создания простых форм с базовой валидацией (обязательно, minlength, maxlength,...).

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

Оформить заказ на следующую тему...

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

Angular2 Forms API, Шаблон управляемый или Реактивный?

Ответ 3

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

вот что опубликовал Аравинд, который является абстрактным и прямым к сути. поэтому я копирую и вставляю все сравнение:

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

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

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

• Более гибкий, но требует много практики

• Обрабатывает любые сложные сценарии

• Привязка данных не выполняется (неизменяемая модель данных предпочитается большинством разработчиков).

• Больше кода компонента и меньше разметки HTML

• Реактивные преобразования могут быть сделаны возможными, такими как

  • Обработка события на основе времени отката

  • Обработка событий, когда компоненты различаются, пока не будут изменены

  • Добавление элементов динамически

• Более простое модульное тестирование

Рядом плюсы и минусы

Ответ 4

Просто мы можем сказать

Реактивная форма может быть использована в следующих ситуациях

• Сложные формы с большим количеством полей.
• Многократная сложная проверка есть. Требуются пользовательские проверки
• Требовать, чтобы структура JSON отправлялась со значениями в форме.

Мы можем получить всю форму структурированным способом, используя "form.value"

Если у нас есть 4 поля Имя, Фамилия, Электронная почта, Номер телефона в реактивной форме.

HTML код будет

<form [formGroup]="form">
    First Name <input formControlName="firstName">
    Last Name <input formControlName="lastName">
    Email <input formControlName="email">
    Phone Number <input formControlName="phoneNumber">
</form>

Мы можем получить значения из формы, как показано ниже

{
"firstName": "FName",
"lastName": "LName",
"email": "[email protected]",
"phoneNumber": "123"
}

вызывая form.value, где form это переменная FormGroup, которую мы создали.

Форма на основе шаблона: может использоваться при использовании простых форм. Как страница входа. С двухсторонней привязкой данных. Мы можем просто присвоить значение переменной из пользовательского интерфейса и наоборот.

Простой пример: если мы предоставляем двухстороннее связывание для ввода ниже.

<input [(ngModel)]="username">

Мы можем просто отобразить значение, которое пользователь дает в пользовательском интерфейсе.

<p>Hello {{username}}!</p>