本文概述
创建Angular表单时，了解框架如何处理数据流非常重要。 Angular中有两种表单的表单，即交互式表单和模板驱动表单，并且都遵循不同的结构来处理用户的输入。
交互表单的数据流
在响应式表单中，视图中的每个表单元素都直接链接到表单模型（FormControl实例）。从视图到模型以及从模型到视图的任何更新都是同步的，并且不依赖于UI。让我们使用图表来了解它。当我们从视图然后从模型更改输入字段的值时，它将显示数据如何流动。
从视图到模型的数据流
数据以交互表单从视图流向模型的步骤：
- 首先，用户在输入元素中输入一个值。在此示例中，输入元素是“收藏夹颜色”，而键入的值是“蓝色”。
- 然后，表单输入元素发出带有最新类型值的“输入”事件。
- 然后，控制值访问器（侦听表单输入元素上的事件）立即将新值中继到FormControl实例。
- 收到值后，FormControl实例通过valueChanges可观察值发出新值。
- 可观察到的valueChanges的所有订阅者都将收到新值。
从模型到视图的数据流
数据以交互表单从模型流向视图的步骤：
- 首先，用户调用favouriteColorControl.setValue（）方法。此方法更新FormControl值。
- 然后，FormControl实例通过可观察到的valueChanges发出新值。
- 然后，可观察到的valueChanges的订户接收到新值。
- 最后，表单输入元素上的控制值访问器用新值更新该元素。
模板驱动表单的数据流
模板驱动的表单的每个表单元素都链接到一个指令，以在内部管理表单模型。让我们以一个图形化的示例来了解当输入字段的值从视图更改然后从视图更改时，数据如何以模板驱动的Angular 表单流动该模型。
从视图到模型的数据流：
数据以交互表单从视图流向模型的步骤：
在此，用户必须将输入值从红色更改为蓝色。
- 首先，用户在输入元素中输入Blue。
- 然后，输入元素发出一个具有值Blue的“输入”事件。
- 然后，附加到输入的控件值访问器将触发FormControl实例上的setValue（）方法。
- 在setValue（）方法之后，FormControl实例通过valueChanges observable发出新值。
- 可观察到的valueChanges的订户接收到新值。
- 之后，控制值访问器还调用NgModel.viewToModelUpdate（）方法，该方法发出ngModelChange事件。
- 在这里，组件模板使用双向数据绑定来设置“ favouriteColor”属性，将组件中的“ favouriteColor”属性更新为ngModelChange事件（蓝色）发出的值。
从模型到视图的数据流：
数据以交互表单从模型流向视图的步骤：
当favoriteColor元素从红色变为蓝色时，从模型到视图的数据流包括以下步骤。
- 首先，在组件中将favoriteColor更新为新值。
- 更改检测开始。
- 在更改检测期间，在NgModel指令实例上调用ngOnChanges生命周期挂钩，因为其输入之一的值已更改。
- ngOnChanges（）方法将异步任务排队，以设置内部FormControl实例的值。
- 更改检测现已完成。
- 然后，执行设置FormControl实例值的任务。
- FormControl实例通过可观察到的valueChanges发出最新值。
- 可观察到的valueChanges的所有订阅者都将收到新值。
- 控件值访问器使用最新的favoriteColor值更新视图中的表单输入元素。
