Angular反应形式

下一篇

角反应形式

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

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

反应形式易于测试,因为它们可以确保在请求时保持一致且可预测的数据。

如何添加单个表单控件

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

按着这些次序:

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类是反应形式中使用的基本构建块。

在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>

输出:

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1