Question

在角度2中，模板驱动形式和反应形式之间的区别是什么。在哪些情况下，我们需要使用模板驱动表单和反应表单

Answer 1

使用模板驱动方法，您基本上会在模板中应用指令，例如ngModel。基于这些指令，Angular将创建formcontrol对象。这种方法适用于使用基本验证（required，minlength，maxlength，...）构建简单表单。

使用被动方法，您基本上需要在组件中创建formcontrols和formcontrolgroups的新实例。反应表单也是构建更复杂表单的最佳选择，如果您打算对表单执行单元测试，则反应更好。

查看以下主题...

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

Angular2 Forms API, Template driven or Reactive?

Answer 2

可以在此处找到对类似问题的全面答案： What are the practical differences between template-driven and reactive forms?

这是Aravind发布的内容，它是抽象的，直接的。所以我复制并粘贴整个比较：

模板驱动的表单功能

易于使用
适用于简单场景，适用于复杂场景
与AngularJS相似
双向数据绑定（使用[（NgModel）]语法）
最小组件
自动跟踪表单及其数据（由Angular处理）
单元测试是另一项挑战

反应表单功能

更灵活，但需要大量练习
处理任何复杂情况
没有进行数据绑定（大多数人都不喜欢不可变数据模型开发者）
更多组件代码和更少的HTML标记
可以进行反应性转换，例如
- 根据去抖时间处理事件
- 处理事件时组件是不同的，直到更改
- 动态添加元素
更简单的单元测试

并排利弊

Answer 3

我们可以简单地说

活动表格可以在以下情况下使用

具有更多字段的复杂表格。
有多个复杂的验证。需要自定义验证
要求将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": "test@123.com",
"phoneNumber": "123"
}

通过调用form.value，其中form是我们创建的FormGroup变量。

模板驱动表单：使用简单表格时可以使用它。喜欢登录页面。用两种方式进行数据绑定。我们可以简单地从ui向变量分配值，反之亦然。

简单的例子是，如果我们为下面的输入提供双向绑定。

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

我们可以简单地在用户界面中显示用户提供的值。

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

模板驱动形式和角度2中的反应形式之间有什么区别

3 个答案: