RxJS 5 是一个基于可观察序列的 JavaScript 库，它使用类似于数组的操作符来处理异步和基于事件的程序。在 Angular 中，RxJS 5 可以用来处理表单操作，其中表单控件是 FormControl，它表示单个表单控件的值和验证状态。在本文中，我们将学习如何使用 RxJS 5 订阅 Angular 的 FormControl。
如何创建一个 FormControl
首先，让我们看看如何创建一个 FormControl。您可以使用以下代码在组件中创建一个 FormControl。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- --------------- --------- ----------------------- -- ------ ----- ----------- - ----------- - --- -------------- -
上面的代码会创建一个空的 FormControl，并在组件的模板中显示 FormControl 的值。
如何订阅 FormControl
现在，让我们看看如何使用 RxJS 5 订阅 FormControl。您可以使用 FormControl 的 valueChanges 属性来订阅 FormControl。valueChanges 是一个 Observable，它在 FormControl 的值（value）更改时发出新值。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---------- - ---- ------------------
------ ------------------------------
------------
--------- ---------------
--------- ------------------
--
------ ----- ----------- -
----------- - --- --------------
------------- -------
------------- -
-----------------------------
--------------
---------------- -- ----------------- - -------
-
-在上面的代码中，我们使用 subscribe() 方法订阅了 FormControl 的 valueChanges 属性，并将当前的值存储在 currentValue 中。我们还使用 startWith() 操作符来在组件初始化时发出一个空值。
如何在一系列 FormControl 上订阅
如果您有一个表单，其中包含多个 FormControl，则可以使用 combineLatest() 操作符来订阅它们的值。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---------- - ---- ------------------
------ ----------------------------------
------------
--------- ---------------
--------- -
----- -------------------
------ ----------------------------
------ ---------------------------
-------------------
--------
--
------ ----- ----------- -
---- - --- -----------
---------- --- --------------
--------- --- --------------
---
--------- -------
------------- -
-------------------------
----------------------------------------
--------------------------------------
------------------------ ---------- -- -
------------- - ------------- -------------
---
-
-在上面的代码中，我们使用 FormGroup 和 FormControl 来创建表单。我们定义了一个名为 fullName 的属性，它将 firstName 和 lastName 合并为一个字符串，并在组件中显示它们。使用 combineLatest() 操作符，我们可以订阅多个 FormControl，并在它们的值更改时更新 fullName 属性。
总结
在本文中，我们学习了如何使用 RxJS 5 订阅 Angular 的 FormControl。我们使用 valueChanges 属性订阅了单个的 FormControl，并使用 combineLatest() 操作符来订阅一组 FormControl。RxJS 5 为我们提供了一个强大的工具，可以帮助我们更有效地处理表单操作和异步编程。
以上就是本篇文章的全部内容和示例代码，相信对于前端开发者来说会有所帮助，希望大家能够真正了解 RxJS 5 的特性和应用方法，并在实际开发中充分发挥它的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653fe1577d4982a6eb9726a4