本文概述
- 交互表单的数据流
- 模板驱动表单的数据流
交互表单的数据流在响应式表单中,视图中的每个表单元素都直接链接到表单模型(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指令实例上调用ngOnChanges生命周期挂钩,因为其输入之一的值已更改。
- ngOnChanges()方法将异步任务排队,以设置内部FormControl实例的值。
- 更改检测现已完成。
- 然后,执行设置FormControl实例值的任务。
- FormControl实例通过可观察到的valueChanges发出最新值。
- 可观察到的valueChanges的所有订阅者都将收到新值。
- 控件值访问器使用最新的favoriteColor值更新视图中的表单输入元素。
推荐阅读
- angular 7交互表单
- angular 7表单
- angular 7错误修复
- angular 7管道
- angular 7的属性绑定
- angular 7事件绑定
- angular 7字符串插入
- angular 7数据绑定
- angular 7的ngstyle指令