Angular 提供了一种强大的方式来处理表单，即使用响应式表单。通过 Angular 的响应式表单，我们可以轻松地管理复杂的表单，包括表单验证、表单状态跟踪以及表单数据的绑定。
在本文中，我们将介绍如何在 Angular 中使用响应式表单来设置表单控件的值。
前置知识
在开始本文之前，我们需要了解一些 Angular 的基础知识：
- Angular 组件
- Angular 模板语法
- Angular 表单和表单控件
- Reactive Forms
如果您想深入学习这些内容，建议您先去官方文档进行学习：Angular 官方文档。
Reactive Forms 简介
Reactive Forms 是 Angular 提供的一种用于处理表单的方式，它通过代码控制表单的行为和交互。与模板驱动表单不同，Reactive Forms 使用一个可观察对象（Observable）来跟踪表单的值和状态。
对于多个组件之间共享表单数据的场景，使用 Reactive Forms 会更加简单明了。这是因为 Reactive Forms 允许将表单数据存储在一个独立的数据模型中，从而使得组件之间能够更加轻松地共享表单数据。
在本文中，我们将假设您已经了解 Reactive Forms 的基础知识，并掌握如何创建和使用响应式表单。
设置表单控件的值
在 Angular 中，我们可以通过 setValue() 和 patchValue() 方法来设置表单控件的值。
setValue()
setValue() 方法用于完全替换表单控件的当前值。如果没有给出所有表单控件的值，则会引发错误。
this.form.setValue({
firstName: 'John',
lastName: 'Doe'
});上面的代码片段中，我们给表单控件 firstName 和 lastName 设置了新的值。请注意，我们必须同时指定所有的表单控件的值，否则会抛出错误。
patchValue()
patchValue() 方法用于部分替换表单控件的当前值。如果某些表单控件没有被指定，则它们将保留其当前值。
this.form.patchValue({
firstName: 'Jane'
});上面的代码片段中，我们只给表单控件 firstName 设置了新的值，而表单控件 lastName 保留了其原始值。
示例代码
让我们通过一个示例来演示如何在 Angular 中使用 Reactive Forms 来设置表单控件的值。在这个示例中，我们将创建一个简单的表单，包含一个输入框和一个按钮。当用户点击按钮时，我们将使用 Reactive Forms 来设置输入框的值。
首先，我们需要在模板中创建表单控件。下面是一个简单的模板，它包含一个名为 name 的输入框和一个名为 button 的按钮：
<form [formGroup]="form"> <input formControlName="name"> <button (click)="setValue()">Set Value</button> </form>
接下来，我们需要在组件中创建响应式表单。在本例中，我们只需要一个名为 name 的表单控件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ --------- - ---- -----------------
------------
--------- -----------
--------- -
----- -------------------
------ -----------------------
------- ------------------------ --------------
-------
--
--
------ ----- ------------ -
----- ----------
------------------- ---
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------