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

Question

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

Answer 1

我们可以说

反应形式可用于以下情况

• 具有更多字段的复杂表单.
• 有多个复杂的验证.需要自定义验证
• 要求使用表单中的值发送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">

我们可以简单地显示用户在UI中提供的值.

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

Answer 2

使用模板驱动方法,您基本上可以在模板中应用指令,例如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,模板驱动还是反应？

Answer 3

可以在此处找到对类似问题的全面答案: 模板驱动和反应形式之间的实际差异是什么？

这是Aravind的发布,它是抽象的,直接的.所以我复制并粘贴整个比较:

模板驱动的表单功能

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

反应表单功能

• 更灵活,但需要大量练习

• 处理任何复杂的场景

• 没有数据绑定(大多数开发人员首选的不可变数据模型)

• 更多组件代码和更少的HTML标记

• 可以实现反应性转换,例如

  • 根据去抖时间处理事件

  • 处理事件时组件是不同的,直到更改为止

  • 动态添加元素

• 更简单的单元测试

并列利弊