angular响应式表单和模板驱动表单的区别?

发布于 2022-09-07 12:17:58 字数 44 浏览 16 评论 0

angular响应式的表单和模板驱动表单的区别,他们的适用场景分别是什么?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

牵你手 2022-09-14 12:17:58

可以简单理解成响应式表单是动态的, 模板驱动表单是静态的.

模板驱动表单适用于页面比较固定, 例如登录页面, 可以使用模板驱动表单.
响应式表单适用于动态页面, 通常都是维护一个formGroup, 任何想要添加进来进行验证的组件,只要绑定一个formControl, 然后加入到formGroup里, 接下来的状态就可以通过formGroup来获取了.

举个栗子吧, 我点击创建用户, 然后需要打开一个dialog来指定每个字段的值, 然后进行做验证.
因为同样的对话框还会用于创建任务, 创建公司等等, 所以这个对话框就是动态的, 那就不能使用模板驱动表单了。
怎么做呢?
在dialog组件里面, 我可以创建一个formGroup formGroup: FormGroup = new FormGroup()
然后针对dialog里面的field,就可以使用formGroup来添加formControls

    this.formGroup.addControl('name', new FormControl())
    this.formGroup.addControl('age', new FormControl())
    this.formGroup.addControl('hobby', new FormControl())
    this.formGroup.addControl('gender', new FormControl())
独自←快乐 2022-09-14 12:17:58

简单的来说,模板驱动使用ngModel把控件和数据绑定,Angular会自己异步监听处理值的变化,在我们看来这就是黑箱操作,我们控制不了。响应式表单通过FormControl等实时处理控件的值及状态,可控性大大提高。选中哪种看你是否要求数据可控。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文