Angular 表单中的数据流

当你创建 Angular 表单时，了解框架如何处理数据流非常重要。 Angular 中有两种类型的表单：响应式表单和模板驱动表单，它们都遵循不同的结构来处理用户输入。

响应式表单中的数据流

在响应式表单中，视图中的每个表单元素都直接链接到表单模型（FormControl 实例）。从视图到模型和从模型到视图的任何更新都是同步的，并且不依赖于 UI。 让我们通过一个图表来理解它。 它将显示当我们从视图更改输入字段的值，然后从模型更改输入字段的值时，数据如何流动。

从视图到模型的数据流

响应式表单中从视图到模型的数据流的步骤

• 首先，用户在输入元素中键入一个值。 在此示例中，输入元素是“最喜欢的颜色”，键入的值是“蓝色”。
• 然后，表单输入元素使用最新的键入值发出一个“input”事件。
• 然后，控件值访问器（监听表单输入元素上的事件）立即将新值传递给 FormControl 实例。
• 在接收到该值后，FormControl 实例通过 valueChanges 可观察对象发出新值。
• 任何订阅 valueChanges 可观察对象的订阅者都会收到新值。

从模型到视图的数据流

响应式表单中从模型到视图的数据流的步骤

• 首先，用户调用 favoriteColorControl.setValue() 方法。 此方法更新 FormControl 的值。
• 然后，FormControl 实例通过 valueChanges 可观察对象发出新值。
• 然后，订阅 valueChanges 可观察对象的订阅者会收到新值。
• 最后，表单输入元素上的控件值访问器使用新值更新该元素。

模板驱动表单中的数据流

模板驱动表单的每个表单元素都链接到用于在内部管理表单模型的指令。 让我们通过一个图形示例来理解当从视图更改输入字段的值，然后从模型更改输入字段的值时，数据如何在模板驱动的 Angular 表单中流动。

从视图到模型的数据流

响应式表单中从视图到模型的数据流的步骤

这里用户必须将输入值从红色更改为蓝色。

• 首先，用户在输入元素中键入蓝色。
• 然后，输入元素发出一个值为蓝色的“input”事件。
• 然后，附加到输入的控件值访问器触发 FormControl 实例上的 setValue() 方法。
• 在 setValue() 方法之后，FormControl 实例通过 valueChanges 可观察对象发出新值。
• 订阅 valueChanges 可观察对象的订阅者会收到新值。
• 之后，控件值访问器还会调用 NgModel.viewToModelUpdate() 方法，该方法发出 ngModelChange 事件。
• 在这里，组件模板使用双向数据绑定来绑定 favoriteColor 属性，组件中的 favoriteColor 属性更新为 ngModelChange 事件发出的值（蓝色）。

从模型到视图的数据流

响应式表单中从模型到视图的数据流的步骤

当 favoriteColor 元素从红色更改为蓝色时，从模型到视图的数据流包括以下步骤：

• 首先，favoriteColor 在组件中更新为一个新值。
• 更改检测开始。
• 在更改检测期间，NgModel 指令实例上调用 ngOnChanges 生命周期钩子，因为其输入之一的值已更改。
• ngOnChanges() 方法会排队一个异步任务，以设置内部 FormControl 实例的值。
• 更改检测现已完成。
• 然后，执行设置 FormControl 实例值的任务。
• FormControl 实例通过 valueChanges 可观察对象发出最新值。
• 任何订阅 valueChanges 可观察对象的订阅者都会收到新值。
• 控件值访问器使用最新的 favoriteColor 值更新视图中的表单输入元素。