您现在的位置是:主页 > Web前端技术 > Web前端技术

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

IDCBT2022-01-13服务器技术人已围观

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

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

响应式表单

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

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

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

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

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

    要使用响应式表单控件,就要从 @angular/forms 包中导入 ReactiveFormsModule,并把它添加到你的 NgModuleimports数组中。如下: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('');
      }

      然后在模板中注册该控件,如下:

      标签:

      很赞哦! ()

本栏推荐