Angular Reactive Forms
Angular Reactive Forms遵循模型驱动的方法来处理其值随时间变化的形式输入。这些也称为模型驱动形式。在反应式表单中，可以创建和更新简单的表单控件，在组中使用多个控件，验证表单值，并实现更高级的表单。
Angular Reactive Forms使用显式且不可变的方法来管理状态。在给定时间点的形式。当我们更改表单状态时，它将返回一个新状态，该状态管理更改之间的模型完整性。在Angular Reactive Forms中，您可以在组件类中构建自己的形式表示形式。
Angular Reactive Forms易于测试，因为它们可以确保在请求时保持一致且可预测的数据。
如何添加单个表单控件
在本节中，我们将介绍如何添加单个表单控件。在这里，用户必须在输入字段中输入其姓名，表单捕获该输入值，并显示表单控件元素的当前值。
请按照以下步骤操作:
1、注册反应式表单模块
您必须从@ angular/forms包中导入ReactiveFormsModule并将其添加到NgModule的imports数组中才能使用反应式表单。
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }
2、生成并导入新的表单控件
首先，使用以下语法为控件生成组件:
ng generate component NameEditor
要注册一个表单控件，必须将FormControl类导入到组件中，并创建表单控件的新实例以另存为类属性。 FormControl类是用于Angular Reactive Forms的基本构建块。
在name-editor.component.ts文件中编写以下代码:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-name-editor',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
name = new FormControl('');
}
3、现在，将控件注册到模板中
在组件类中创建控件后，必须将其添加到模板中的表单控件元素中。使用FormControlDirective提供的formControl绑定使用表单控件更新模板。
<label>
Name:
<input type="text" [formControl]="name">
</label>
我们已经将表单控件注册到模板中的名称输入元素。现在，表单控件和DOM元素相互通信，并且视图反映了模型中的更改，而模型反映了视图中的更改。
4、显示组件
将表单控件组件添加到模板中以显示表单。将以下代码添加到app.component.html。
<app-name-editor></app-name-editor>
输出:
