angular 7交互表单 angular7交互表单|Angular7教程

本文概述

如何添加一个表单控件

角反应形式遵循模型驱动的方法来处理形式输入，其值可以随时间变化。这些也称为模型驱动形式。在反应式表单中，你可以创建和更新简单的表单控件，在组中使用多个控件，验证表单值以及实现更高级的表单。
【angular 7交互表单】响应式表单使用显式且不变的方法来管理给定时间点的表单状态。当我们更改表单状态时，它会返回一个新状态，该状态管理更改之间的模型完整性。在反应形式中，你可以在组件类中构建自己的形式表示形式。
响应式表单易于测试，因为它们可以确保在请求时保持一致且可预测的数据。
如何添加一个表单控件在本节中，我们将描述如何添加单个表单控件。在这里，用户必须在输入字段中输入其名称，表单捕获该输入值，并显示表单控件元素的当前值。
按着这些次序：
1.注册反应形式模块
你必须从@ angular / forms包中导入交互iveFormsModule并将其添加到NgModule的imports数组中才能使用反应形式。

import { 交互iveFormsModule } from '@angular/forms'; @NgModule({ imports: [ // other imports ... 交互iveFormsModule ], }) 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绑定来使用表单控件更新模板。