您现在的位置是:主页 > Web前端技术 > Web前端技术
如何实现angular中的响应式表单
IDCBT2022-01-13【服务器技术】人已围观
简介小编给大家分享一下如何实现angular中的响应式表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一
小编给大家分享一下如何实现angular中的响应式表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
响应式表单Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单
和模板驱动表单
。【相关教程推荐:《angular教程》】
响应式表单:提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比,更加健壮。如果表单是你的应用程序的关键部分,或者你已经在使用响应式表单来构建应用,那就使用响应式表单。
模板驱动表单:依赖模板中的指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用,比如电子邮件列表注册表单。
全局注册响应式表单模块 ReactiveFormsModule这里只介绍响应式表单,模板驱动表单请参考官网—https://angular.cn/guide/forms-overview#setup-in-template-driven-forms
要使用响应式表单控件,就要从 @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(''); }
然后在模板中注册该控件,如下:
标签:很赞哦! ()