大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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('');
}

然后在模板中注册该控件,如下:test.component.html




name: {{ name.value }}

FormControl 的其它属性和方法,参阅 API 参考手册

https://angular.cn/api/forms/FormControl#formcontrol

把表单控件分组 FormGroup

就像FormControl 的实例能让你控制单个输入框所对应的控件一样,FormGroup 的实例也能跟踪一组 FormControl 实例(比如一个表单)的表单状态。当创建 FormGroup 时,其中的每个控件都会根据其名字进行跟踪。

看下例演示:test.component.tstest.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)
    }
}



    
    
    Submit
  

  

{{ 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()。这些方法都是工厂方法,用于在组件类中分别生成FormControlFormGroupFormArray

看下例演示: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服务可以更方便地生成FormControlFormGroupFormArray,而不必每次都手动new一个新的实例出来。

表单验证器 Validators

Validators类验证器的完整API列表,参考API手册

https://angular.cn/api/forms/Validators

验证器(Validators)函数可以是同步函数,也可以是异步函数。

  • 同步验证器:这些同步函数接受一个控件实例,然后返回一组验证错误或 null。你可以在实例化一个 FormControl 时把它作为构造函数的第二个参数传进去。

  • 异步验证器 :这些异步函数接受一个控件实例并返回一个 PromiseObservable,它稍后会发出一组验证错误或 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中如何实现响应式表单
本文URL:http://dzwzjz.com/article/jigjes.html
在线咨询
服务热线
服务热线:028-86922220
TOP