角度形式的数据流

创建Angular表单时，了解框架如何处理数据流非常重要。 Angular中有两种形式的表单，即反应式表单和模板驱动形式，并且都遵循不同的结构来处理用户的输入。

反应形式的数据流

在Reactive表单中，视图中的每个表单元素都直接链接到表单模型(FormControl实例)。从视图到模型以及从模型到视图的任何更新都是同步的，并且不依赖于UI。让我们使用图表来了解它。当我们从视图然后从模型更改输入字段的值时，它将显示数据如何流动。

从视图到模型的数据流

数据以反应形式从视图流向模型的步骤：

• 首先，用户在输入元素中输入一个值。在此示例中，输入元素为“收藏夹颜色”，而键入的值为“蓝色”。
• 然后，表单输入元素发出具有最新类型值的“输入”事件。
• 然后，控制值访问器(侦听表单输入元素上的事件)立即将新值中继到FormControl实例。
• 收到值后，FormControl实例通过valueChanges可观察值发出新值。
• 可观察到的valueChanges的所有订阅者都将收到新值。

从模型到视图的数据流

数据以反应形式从模型流向视图的步骤：

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

模板驱动形式的数据流

模板驱动的表单的每个表单元素都链接到一个指令，以在内部管理表单模型。让我们以图形为例，了解当从视图中更改输入字段的值，然后从视图中更改输入字段的值时，数据如何以模板驱动的角度形式流动该模型。

从视图到模型的数据流：

数据以反应形式从视图流向模型的步骤：

在此，用户必须将输入值从红色更改为蓝色。

• 首先，用户在输入元素中输入Blue。
• 然后，输入元素发出一个具有值Blue的“输入”事件。
• 然后，附加到输入的控件值访问器将触发FormControl实例上的setValue()方法。
• 在setValue()方法之后，FormControl实例通过valueChanges observable发出新值。
• 可观察到的valueChanges的订户接收到新值。
• 之后，控制值访问器还调用NgModel.viewToModelUpdate()方法，该方法发出ngModelChange事件。
• 在这里，组件模板使用双向数据绑定来设置“ favouriteColor”属性，将组件中的“ favouriteColor”属性更新为ngModelChange事件(蓝色)发出的值。

从模型到视图的数据流：

数据以反应形式从模型流向视图的步骤：

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

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