模板驱动表单和使用服务的响应式表单之间的区别

Posted 2023-03-13

【中文标题】模板驱动表单和使用服务的响应式表单之间的区别

【英文标题】：Difference between Template Driven Form and Reactive Form using a service

【发布时间】：2019-11-07 13:50:50

【问题描述】：

我想知道什么时候应该使用模板驱动表单而不是响应式表单。我知道基于该问题的理论（What are the practical differences between template-driven and reactive forms?），但我不知道哪个与 Angular Material 一起使用。我总是对哪个用途有疑问。

谁能帮帮我？

提前谢谢你。

【参考方案1】：

作为专注于 Angular 的开发人员，我建议始终使用响应式表单设置。

开发人员会争论，但相信我，您以后会省去自己的麻烦。 Netanel B 也在这里写过：Why It’s Time to Say Goodbye to Angular Template-Driven Forms

假设你想要一个非常简单的输入，你可能会想简单地使用

ngModel 模板变量

@ViewChild

他们现在可能还好。

但是假设您需要添加：

验证 观察变化 以编程方式更新值

这些都需要您依赖并围绕您选择的访问输入的方法进行编码。

Reactive forms 是一个预先构建的 API，它为每个需求带来了一个标准。

【参考方案2】：

模板驱动的表单

在开发静态表单时使用模板驱动的表单。静态意味着表单的结构和逻辑是固定的。例如。表单字段的数量不变，不同用户角色的表单验证规则相同等。 示例包括登录表单、重置密码表单、用于输入和编辑地址数据的表单、订单数据和类似的修复数据结构。

反应形式

如果表单应支持动态数据结构和逻辑，请使用反应式表单方法。例如动态调查表格、添加/删除 0..n 个标签或电话号码的表格、为不同用户角色提供不同验证的表格等。

响应式表单的结构和逻辑主要在 TypeScript 中实现。相应的 html 工件仅指 TypeScript 中定义的表单控件。在最高扩展阶段，可以在运行时基于数据结构完全生成响应式表单。

更多详情请关注link