angular学习之浅析响应式表单

107 阅读 0 评论 71 点赞

我是靠谱客的博主哭泣蜻蜓，最近开发中收集的这篇文章主要介绍angular学习之浅析响应式表单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本篇文章带大家继续angular的学习，了解一下angular中的响应式表单，介绍一下全局注册响应式表单模块、添加基础表单控件的相关知识，希望对大家有所帮助！

响应式表单

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

响应式表单：提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮。如果表单是你的应用程序的关键部分，或者你已经在使用响应式表单来构建应用，那就使用响应式表单。
模板驱动表单：依赖模板中的指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用，比如电子邮件列表注册表单。

全局注册响应式表单模块 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

<!-- test.component.html -->
<label>
  Name: <input type="text" [formControl]="name">
</label>
<!-- input 中输入的值变化的话，这里显示的值也会跟着变化 -->
<p>name: {{ name.value }}</p>
登录后复制

把表单控件分组 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 这个 FormGroup 通过 FormGroup 指令绑定到了 form 元素，在该模型和表单中的输入框之间创建了一个通讯层 -->
<!-- FormGroup 指令还会监听 form 元素发出的 submit 事件，并发出一个 ngSubmit 事件，让你可以绑定一个回调函数。 -->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <label>
<!-- 由 FormControlName 指令把每个输入框和 FormGroup 中定义的表单控件 FormControl 绑定起来。这些表单控件会和相应的元素通讯 -->
      First Name: <input type="text" formControlName="firstName">
    </label>
    <label>
      Last Name: <input type="text" formControlName="lastName">
    </label>
    <button type="submit" [disabled]="!profileForm.valid">Submit</button>
  </form>

  <p>{{ profileForm.value }}</p>
  <!-- 控件组的状态： INVALID 或 VALID -->
  <p>{{ profileForm.status }}</p>	
  <!-- 控件组输入的值是否为有效值： true 或 false-->
  <p>{{ profileForm.valid }}</p>
  <!-- 是否禁用： true 或 false-->
  <p>{{ profileForm.disabled }}</p>
登录后复制

使用更简单的 FormBuilder 服务生成控件实例

在响应式表单中，当需要与多个表单打交道时，手动创建多个表单控件实例会非常繁琐。FormBuilder服务提供了一些便捷方法来生成表单控件。FormBuilder在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。

FormBuilder 是一个可注入的服务提供者，它是由 ReactiveFormModule 提供的。只要把它添加到组件的构造函数中就可以注入这个依赖。

看下例演示：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）函数可以是同步函数，也可以是异步函数。

同步验证器：这些同步函数接受一个控件实例，然后返回一组验证错误或 null。你可以在实例化一个 FormControl 时把它作为构造函数的第二个参数传进去。
异步验证器：这些异步函数接受一个控件实例并返回一个 Promise 或 Observable，它稍后会发出一组验证错误或 null。在实例化 FormControl 时，可以把它们作为第三个参数传入。

验证器Validators类的API

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'); }
登录后复制

自定义验证器

有时候内置的验证器并不能很好的满足需求，比如，我们需要对一个表单进行验证，要求输入的值只能为某一个数组中的值，而这个数组中的值是随程序运行实时改变的，这个时候内置的验证器就无法满足这个需求，需要创建自定义验证器。

在响应式表单中添加自定义验证器。在上面内置验证器一节中有一个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;
  };
}
登录后复制

在模板驱动表单中添加自定义验证器。要为模板添加一个指令，该指令包含了 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;
  };
}
登录后复制

<input type="text" required appForbiddenName="bob" [(ngModel)]="hero.name">
登录后复制

最后

以上就是哭泣蜻蜓为你收集整理的angular学习之浅析响应式表单的全部内容，希望文章能够帮你解决angular学习之浅析响应式表单所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：angular
浏览次数：107 次浏览
发布日期：2022-11-15 00:36:01
本文链接：https://www.kaopuke.com/article/k-p-k_14_ujo_10_fy_14_zc5.html

angular学习之浅析响应式表单

概述

响应式表单

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

添加基础表单控件 FormControl

把表单控件分组 FormGroup

使用更简单的 FormBuilder 服务生成控件实例

表单验证器 Validators

验证器Validators类的API

内置验证器函数

自定义验证器

最后

评论列表共有 0 条评论

发表评论取消回复

angular学习之浅析响应式表单

概述

响应式表单

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

添加基础表单控件 FormControl

把表单控件分组 FormGroup

使用更简单的 FormBuilder 服务生成控件实例

表单验证器 Validators

验证器Validators类的API

内置验证器函数

自定义验证器

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复