如何实现angular中的响应式表单

小编给大家分享一下如何实现angular中的响应式表单，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

Angular 提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。【相关教程推荐：《angular教程》】

响应式表单：提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮。如果表单是你的应用程序的关键部分，或者你已经在使用响应式表单来构建应用，那就使用响应式表单。

模板驱动表单：依赖模板中的指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用，比如电子邮件列表注册表单。

这里只介绍响应式表单，模板驱动表单请参考官网—https://angular.cn/guide/forms-overview#setup-in-template-driven-forms

全局注册响应式表单模块 ReactiveFormsModule

要使用响应式表单控件，就要从 @angular/forms 包中导入 ReactiveFormsModule，并把它添加到你的 NgModule 的imports数组中。如下：app.module.ts

/***** app.module.ts *****/
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

添加基础表单控件 FormControl

使用表单控件有三个步骤。

在你的应用中注册响应式表单模块。该模块声明了一些你要用在响应式表单中的指令。

生成一个新的 FormControl 实例，并把它保存在组件中。

在模板中注册这个 FormControl。

要注册一个表单控件，就要导入FormControl类并创建一个 FormControl的新实例，将其保存为类的属性。如下：test.component.ts

/***** test.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 TestComponent {
	// 可以在 FormControl 的构造函数设置初始值，这个例子中它是空字符串
  name = new FormControl('');
}

然后在模板中注册该控件，如下：

转载：感谢您对IDCBT博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源IDCBT博客”。

标签：

很赞哦！ ()