Angular 响应式表单

Angular 响应式表单遵循一种模型驱动方法来处理表单输入，其值可以随时间变化。 这些也称为模型驱动表单。 在响应式表单中，您可以创建和更新简单的表单控件，在组中使用多个控件，验证表单值以及实现更高级的表单。

响应式表单使用显式且不可变的方法来管理给定时间点的表单状态。 当我们更改表单状态时，它会返回一个新状态，该状态管理更改之间模型的完整性。 在响应式表单中，您可以在组件类中构建自己的表单表示。

响应式表单易于测试，因为它们在请求时可确保一致且可预测的数据。

如何添加单个表单控件

在本节中，我们将描述如何添加单个表单控件。 在这里，用户必须在输入字段中输入他们的姓名，表单捕获该输入值，并显示表单控件元素的当前值。

按照以下步骤

1. 注册响应式表单模块

您必须从 @angular/forms 包中导入 ReactiveFormsModule，并将其添加到 NgModule 的 imports 数组中以使用响应式表单。

2. 生成并导入一个新的表单控件

首先，使用以下语法为控件生成一个组件

要注册单个表单控件，您必须将 FormControl 类导入到您的组件中，并创建一个新的表单控件实例以另存为类属性。 FormControl 类是响应式表单中使用的基本构建块。

将以下代码写入 name-editor.component.ts 文件

3. 现在，在模板中注册控件

在组件类中创建控件后，必须将其添加到模板中的表单控件元素。 使用 FormControlDirective 提供的 formControl 绑定来使用表单控件更新模板。

我们已将表单控件注册到模板中的名称输入元素。 现在，表单控件和 DOM 元素相互通信，并且视图反映模型中的更改，并且模型反映视图中的更改。

4. 显示组件

将表单控件组件添加到模板以显示表单。 将以下代码添加到 app.component.html。

输出