简介
Angular 的 @angular/forms
包提供了一个 Validators
类,支持诸如 required
、minLength
、maxLength
和 pattern
等有用的内置验证器。然而,可能存在需要更复杂或自定义规则进行验证的表单字段。在这种情况下,您可以使用自定义验证器。
在 Angular 中使用响应式表单时,您可以使用函数定义自定义验证器。如果验证器不需要被重复使用,它可以直接存在于组件文件中作为一个函数。否则,如果验证器需要在其他组件中重复使用,它可以存在于一个单独的文件中。
在本教程中,您将构建一个带有可重用自定义验证器的响应式表单,以检查 URL 是否符合特定条件。
先决条件
要完成本教程,您需要:
- 在本地安装 Node.js,您可以按照《如何安装 Node.js 并创建本地开发环境》进行操作。
- 一些关于设置 Angular 项目的基本知识。
本教程已经在 Node v15.2.1、npm
v6.14.8、@angular/core
v11.0.0 和 @angular/forms
v11.0.0 下进行了验证。
步骤 1 – 设置项目
为了本教程的目的,您将从使用 @angular/cli
生成的默认 Angular 项目开始构建。
npx @angular/cli new angular-reactive-forms-custom-validtor-example --style=css --routing=false --skip-tests
这将配置一个新的 Angular 项目,其中样式设置为 “CSS”(而不是 “Sass”、“Less” 或 “Stylus”),没有路由,并且跳过了测试。
进入新创建的项目目录:
cd angular-reactive-forms-custom-validator-example
为了使用响应式表单,您将使用 ReactiveFormsModule
而不是 FormsModule
。
在代码编辑器中打开 app.module.ts
并添加 ReactiveFormsModule
:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ReactiveFormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
到此为止,您应该已经拥有一个带有 ReactiveFormsModule
的新 Angular 项目。
步骤 2 – 构建自定义验证器
本教程的示例自定义验证器将接受一个 URL 字符串,并确保它以 https
协议开头并以 .io
顶级域名结尾。
首先,在您的终端中,创建一个 shared
目录:
mkdir src/shared
然后,在这个新目录中,创建一个新的 url.validator.ts
文件。在代码编辑器中打开此文件并添加以下代码:
import { AbstractControl } from '@angular/forms'; export function ValidateUrl(control: AbstractControl) { if (!control.value.startsWith('https') || !control.value.includes('.io')) { return { invalidUrl: true }; } return null; }
这段代码使用了 AbstractControl
类,它是 FormControl
、FormGroup
和 FormArray
的基类。这允许访问 FormControl
的值。
这段代码将检查值是否以 https
字符串开头。它还将检查值是否包含 .io
字符串。
如果验证失败,它将返回一个带有错误名称 invalidUrl
和值 true
的对象。
否则,如果验证通过,它将返回 null
。
到此为止,您的自定义验证器已经准备就绪。
步骤 3 – 使用自定义验证器
接下来,创建一个表单,其中包含 userName
和 websiteUrl
。
打开 app.component.ts
并用以下代码替换内容:
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ValidateUrl } from '../shared/url.validator'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { myForm: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.myForm = this.fb.group({ userName: ['', Validators.required], websiteUrl: ['', [Validators.required, ValidateUrl]] }); } saveForm(form: FormGroup) { console.log('Valid?', form.valid); // true or false console.log('Username', form.value.userName); console.log('Website URL', form.value.websiteUrl); } }
在这段代码中,websiteUrl
表单控件同时使用了内置的 Validators.required
和自定义的 ValidateUrl
验证器。
第四步 – 访问模板中的错误信息
与您的表单交互的用户需要了解哪些数值未通过验证。在组件模板中,您可以使用自定义验证器返回值中定义的键。
打开 app.component.html
并用以下代码替换内容:
<form [formGroup]="myForm" (ngSubmit)="saveForm(myForm)"> <div> <label> 用户名: <input formControlName="userName" placeholder="您的用户名"> </label> <div *ngIf="( myForm.get('userName').dirty || myForm.get('userName').touched ) && myForm.get('userName').invalid" > 请提供您的用户名。 </div> </div> <div> <label> 网站 URL: <input formControlName="websiteUrl" placeholder="您的网站"> </label> <div *ngIf="( myForm.get('websiteUrl').dirty || myForm.get('websiteUrl').touched ) && myForm.get('websiteUrl').invalid" > 仅接受通过 HTTPS 提供且来自 .io 顶级域的 URL。 </div> </div> </form>
此时,您可以编译您的应用程序:
npm start
然后在您的网络浏览器中打开它。您可以与 userName
和 websiteUrl
字段进行交互。确保您的 ValidateUrl
的自定义验证器对于应满足 https
和 .io
条件的值(例如 https://example.io
)能够正常工作。
结论
在本文中,您为 Angular 应用程序中的响应式表单创建了一个可重用的自定义验证器。
要了解模板驱动表单和响应式表单中自定义验证器的示例,请参阅 Angular 中的自定义表单验证。
如果您想了解更多关于 Angular 的知识,请查看我们的 Angular 主题页面,了解练习和编程项目。