带有 ngrx 的大量表单控件答案

【问题标题】：Large number of form controls with ngrx带有 ngrx 的大量表单控件
【发布时间】：2018-04-02 06:41:02
【问题描述】：

我最近学习了 NgRx（实际上还在尝试学习）并将我们现有的项目更新为 Angular 5 和 ngrx 结构。到目前为止一切顺利，但我们的一个页面有一个数据表，其中包含超过 1k 多个表单字段。

我通常使用响应式表单从状态切片填充表单字段并在用户发送表单时更新对状态的更改，但是使用这么多表单字段创建表单控件可能会非常昂贵并且不想减慢速度页面，似乎只使用带有 NgRx 结构的基本文本框和 ngModel 是不行的

我怎样才能以 NgRx 的方式解决这个问题。提前谢谢你

【问题讨论】：

天哪，什么样的应用程序有超过1000个表单域的表单？无论如何，至于您的问题，使用反应式表单或模板驱动的表单将创建相同数量的 FormControl 对象，它们提供的灵活性以及您是否必须自己手动实例化 FormControls 不同，反应式form 最适合动态形式。 ngrx store 只是一个状态管理器，与 redux store 非常相似（ngrx store 的灵感来自于 redux store btw），所以并没有真正的“ngrx 方式”
是模板驱动或响应式都创建了这些表单对象，并且该页面用于供应商折扣，因此用户可以过滤和更新一千多个供应商。旧版本使用 ngModel 更新这些表单字段。（我认为基本文本字段和 ngModel）并没有产生那么多开销。但是使用 formControls 只是让我害怕。可能最好将所有这些都放在一个表单数组中，然后只听变化。
好吧，首先，使用ngModel，angular会自动创建FormControls并将它们附加到你的input HTML元素上，所以如果你使用的是响应式表单，你必须做所有你自己，从逻辑上讲，它不应该引起任何性能问题。同样，不要过早优化，测量并查看与模板驱动的表单相比，反应式表单是否会导致性能问题，但我非常确定使用反应式表单不会让您的表单变慢
Himm 我不知道使用 ngModel 创建表单控件创建，但无论如何，另一个问题是创建所有这些表单控件并将它们添加到表单组。可能我也应该使用循环来做到这一点（不可能一个一个地创建所有这些）谢谢，如果您回答问题，我将标记为答案

【解决方案1】：

当您使用模板驱动表单时（通过在input 元素上使用ngModel 指令），angular 会自动代表您创建FormControls 并将它们附加到所有已注册的input HTML 元素，然后注册这些@ 987654325@s 和 NgForm 直接为您创建并附加到 form 元素。另一方面，如果您选择使用响应式表单，您自己必须显式创建顶级FormGroup 和任何FormControls 或FormArrays，并注册这些FormControls 和FormArray s 与父 FormGroup 并手动将它们绑定到您的 form 元素和任何您希望 Angular 关注的 input 元素。所以从逻辑上讲，在性能方面不应该有任何显着差异。您也不应该对使用反应形式可能导致的性能问题做出任何假设，在这种情况下，测量是您的最佳答案。但是使用响应式可以更好地控制表单并提供灵活性

ngrx store 只是一个状态管理器，它与 redux store 非常相似，实际上ngrx store 的灵感来自于redux store，一句话，ngrx store 可以让你将所有的应用状态放到一个中心位置，所以更容易管理和检索，所以如果你不需要它，你真的不必使用它，没有真正的“ngrx方式”做事

【讨论】：