如何实现angular中的响应式表单
小编给大家分享一下如何实现angular中的响应式表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联-专业网站定制、快速模板网站建设、高性价比建平网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式建平网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖建平地区。费用合理售后完善,10年实体公司更值得信赖。
响应式表单
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(''); }
然后在模板中注册该控件,如下:test.component.html
name: {{ name.value }}
FormControl
的其它属性和方法,参阅 API 参考手册:https://angular.cn/api/forms/FormControl#formcontrol
把表单控件分组 FormGroup
就像FormControl
的实例能让你控制单个输入框所对应的控件一样,FormGroup
的实例也能跟踪一组 FormControl
实例(比如一个表单)的表单状态。当创建 FormGroup
时,其中的每个控件都会根据其名字进行跟踪。
看下例演示:test.component.ts
、test.component.html
import { Component } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms' @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { constructor() {} profileForm = new FormGroup({ firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]), lastName: new FormControl('', Validators.required), }); onSubmit() { // 查看控件组各字段的值 console.log(this.profileForm.value) } }
{{ profileForm.value }}
{{ profileForm.status }}
{{ profileForm.valid }}
{{ profileForm.disabled }}
FormGroup
的其它属性和方法,参阅 API 参考手册:https://angular.cn/api/forms/FormGroup#formgroup
使用更简单的 FormBuilder 服务生成控件实例
在响应式表单中,当需要与多个表单打交道时,手动创建多个表单控件实例会非常繁琐。FormBuilder
服务提供了一些便捷方法来生成表单控件。FormBuilder
在幕后也使用同样的方式来创建和返回这些实例,只是用起来更简单。
FormBuilder
是一个可注入的服务提供者,它是由 ReactiveFormModule
提供的。只要把它添加到组件的构造函数中就可以注入这个依赖。
FormBuilder
服务有三个方法:control()
、group()
和array()
。这些方法都是工厂方法,用于在组件类中分别生成FormControl
、FormGroup
和FormArray
。
看下例演示:test.component.ts
import { Component } from '@angular/core'; // 1、导入 FormBuilder import { FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent { // 2、注入 FormBuilder 服务 constructor(private fb: FormBuilder) { } ngOnInit() { } profileForm = this.fb.group({ firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]], lastName: ['', Validators.required], }); // 相当于 // profileForm = new FormGroup({ // firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]), // lastName: new FormControl('', Validators.required), // }); onSubmit() { console.log(this.profileForm.value) console.log(this.profileForm) } }
对比可以发现,使用FormBuilder
服务可以更方便地生成FormControl
、FormGroup
和 FormArray
,而不必每次都手动new
一个新的实例出来。
表单验证器 Validators
Validators
类验证器的完整API列表,参考API手册:https://angular.cn/api/forms/Validators
验证器(Validators
)函数可以是同步函数,也可以是异步函数。
同步验证器:这些同步函数接受一个控件实例,然后返回一组验证错误或 null。你可以在实例化一个
FormControl
时把它作为构造函数的第二个参数传进去。异步验证器 :这些异步函数接受一个控件实例并返回一个
Promise
或Observable
,它稍后会发出一组验证错误或 null。在实例化FormControl
时,可以把它们作为第三个参数传入。
出于性能方面的考虑,只有在所有同步验证器都通过之后,Angular 才会运行异步验证器。当每一个异步验证器都执行完之后,才会设置这些验证错误。
验证器Validators类的API
https://angular.cn/api/forms/Validators
class Validators { static min(min: number): ValidatorFn // 允许输入的最小数值 static max(max: number): ValidatorFn // 最大数值 static required(control: AbstractControl): ValidationErrors | null // 是否必填 static requiredTrue(control: AbstractControl): ValidationErrors | null static email(control: AbstractControl): ValidationErrors | null // 是否为邮箱格式 static minLength(minLength: number): ValidatorFn // 最小长度 static maxLength(maxLength: number): ValidatorFn // 最大长度 static pattern(pattern: string | RegExp): ValidatorFn // 正则匹配 static nullValidator(control: AbstractControl): ValidationErrors | null // 什么也不做 static compose(validators: ValidatorFn[]): ValidatorFn | null static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null }
内置验证器函数
要使用内置验证器,可以在实例化FormControl
控件的时候添加
import { Validators } from '@angular/forms'; ... ngOnInit(): void { this.heroForm = new FormGroup({ // 实例化 FormControl 控件 name: new FormControl(this.hero.name, [ Validators.required, // 验证,必填 Validators.minLength(4), // 长度不小于4 forbiddenNameValidator(/bob/i) // 自定义验证器 ]), alterEgo: new FormControl(this.hero.alterEgo), power: new FormControl(this.hero.power, Validators.required) }); } get name() { return this.heroForm.get('name'); } get power() { return this.heroForm.get('power'); }
自定义验证器
自定义验证器的内容请参考 API手册:
https://angular.cn/guide/form-validation
有时候内置的验证器并不能很好的满足需求,比如,我们需要对一个表单进行验证,要求输入的值只能为某一个数组中的值,而这个数组中的值是随程序运行实时改变的,这个时候内置的验证器就无法满足这个需求,需要创建自定义验证器。
在响应式表单中添加自定义验证器。在上面内置验证器一节中有一个
forbiddenNameValidator
函数如下:import { Validators } from '@angular/forms'; ... ngOnInit(): void { this.heroForm = new FormGroup({ name: new FormControl(this.hero.name, [ Validators.required, Validators.minLength(4), // 1、添加自定义验证器 forbiddenNameValidator(/bob/i) ]) }); } // 2、实现自定义验证器,功能为禁止输入带有 bob 字符串的值 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const forbidden = nameRe.test(control.value); // 3、在值有效时返回 null,或无效时返回验证错误对象 return forbidden ? {forbiddenName: {value: control.value}} : null; }; }
验证器在值有效时返回
null
,或无效时返回验证错误对象
。 验证错误对象通常有一个名为验证秘钥(forbiddenName
)的属性。其值为一个任意词典,你可以用来插入错误信息({name})。在模板驱动表单中添加自定义验证器。要为模板添加一个指令,该指令包含了
validator
函数。同时,该指令需要把自己注册成为NG_VALIDATORS
的提供者。如下所示:// 1、导入相关类 import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms'; import { Input } from '@angular/core' @Directive({ selector: '[appForbiddenName]', // 2、注册成为 NG_VALIDATORS 令牌的提供者 providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}] }) export class ForbiddenValidatorDirective implements Validator { @Input('appForbiddenName') forbiddenName = ''; // 3、实现 validator 接口,即实现 validate 函数 validate(control: AbstractControl): ValidationErrors | null { // 在值有效时返回 null,或无效时返回验证错误对象 return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control) : null; } } // 4、自定义验证函数 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const forbidden = nameRe.test(control.value); // 3、在值有效时返回 null,或无效时返回验证错误对象 return forbidden ? {forbiddenName: {value: control.value}} : null; }; }
注意,自定义验证指令是用
useExisting
而不是useClass
来实例化的。如果用useClass
来代替useExisting
,就会注册一个新的类实例,而它是没有forbiddenName
的。
以上是“如何实现angular中的响应式表单”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文名称:如何实现angular中的响应式表单
本文路径:http://scyanting.com/article/jgdcsj.html