Angular Reactive Forms -- Model-Driven Forms响应式表单

大佬教程收集整理的这篇文章主要介绍了Angular Reactive Forms -- Model-Driven Forms响应式表单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

Angular 4.x 中有两种表单：

• Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档：https://v2.angular.cn/docs/ts/latest/guide/forms.html

• Reactive Forms (Model-Driven Forms) - 响应式表单 官方文档： https://v2.angular.cn/docs/ts/latest/guide/reactive-forms.html

Template-Driven Forms (模板驱动表单) 的特点

• 使用方便

• 适用于简单的场景

• 通过 [(ngModel)] 实现数据双向绑定

• 最小化组件类的代码

• 不易于单元测试

• 异步的，模板驱动表单会委托指令来创建它们的表单控件。 为了消除“检查完后又变化了”的错误，这些指令需要消耗一个以上的变更检测周期来构建整个控件树。 这意味着在从组件类中操纵任何控件之前，我们都必须先等待一个节拍。

Reactive Forms (响应式表单) 的特点

• 比较灵活

• 适用于复杂的场景

• 简化了HTML模板的代码，把验证逻辑抽离到组件类中

• 方便的跟踪表单控件值的变化

• 易于单元测试

• 同步的 ，使用响应式表单，我们会在代码中创建整个表单控件树。 我们可以立即更新一个值或者深入到表单中的任意节点，因为所有的控件都始终是可用的。

使用reactive forms 表单前，我们必须在@NgModule中导入@angular/forms库中的ReactiveFormsModule：

import { ReactiveFormsModule }  
@NgModule({

imports: [

...,ReactiveFormsModule

],declarations: [...],bootstrap: [...]

})

export <span style="color: #0000ff">class AppModule {}

大佬总结

以上是大佬教程为你收集整理的Angular Reactive Forms -- Model-Driven Forms响应式表单全部内容，希望文章能够帮你解决Angular Reactive Forms -- Model-Driven Forms响应式表单所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。