Reactive表单中的数据流

从视图到模型的数据流

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

从模型到视图的数据流

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

模板驱动表单中的数据流

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

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