如何在反应式表单中设置模型数据，AGNULAR 9

在Angular 9中，我们可以使用反应式表单来设置模型数据。反应式表单提供了一种响应式的方式来管理表单的状态和值。

要在反应式表单中设置模型数据，我们首先需要导入相关的模块和类。在组件中，可以通过以下方式导入：

import { FormGroup, FormControl } from '@angular/forms';

然后，我们可以在组件的构造函数中创建一个FormGroup对象，并使用FormControl来初始化表单控件的初始值。例如，假设我们有一个包含名称和电子邮件字段的表单，可以按如下方式设置模型数据：

export class MyFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl('John Doe'),
      email: new FormControl('john@example.com')
    });
  }
}

在上面的代码中，我们通过new FormGroup()创建了一个名为myForm的FormGroup对象，并使用new FormControl()为name和email字段分别创建了FormControl对象，并将初始值设置为'John Doe'和'john@example.com'。

接下来，在模板中，我们可以使用formControlName指令将FormGroup和FormControl与表单元素关联起来。例如：

<form [formGroup]="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">

  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
</form>

在上面的代码中，我们使用formGroup指令将myForm和整个表单关联起来。然后，我们使用formControlName指令将name字段和name输入框关联起来，将email字段和email输入框关联起来。

通过这种方式，当组件中的myForm对象的值发生变化时，表单元素中显示的值也会相应地更新。同时，当用户在表单元素中输入值时，myForm对象中的对应字段的值也会相应地更新。

关于Angular 9中反应式表单的更多信息，以及相关的Angular表单控件、验证器等内容，你可以参考腾讯云的文档：

Angular - 表单