如何在 Angular 中为响应式表单创建自定义验证器

简介: 如何在 Angular 中为响应式表单创建自定义验证器

简介

Angular 的 @angular/forms 包提供了一个 Validators 类,支持诸如 requiredminLengthmaxLengthpattern 等有用的内置验证器。然而,可能存在需要更复杂或自定义规则进行验证的表单字段。在这种情况下,您可以使用自定义验证器。

在 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 类,它是 FormControlFormGroupFormArray 的基类。这允许访问 FormControl 的值。

这段代码将检查值是否以 https 字符串开头。它还将检查值是否包含 .io 字符串。

如果验证失败,它将返回一个带有错误名称 invalidUrl 和值 true 的对象。

否则,如果验证通过,它将返回 null

到此为止,您的自定义验证器已经准备就绪。

步骤 3 – 使用自定义验证器

接下来,创建一个表单,其中包含 userNamewebsiteUrl

打开 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

然后在您的网络浏览器中打开它。您可以与 userNamewebsiteUrl 字段进行交互。确保您的 ValidateUrl 的自定义验证器对于应满足 https.io 条件的值(例如 https://example.io)能够正常工作。

结论

在本文中,您为 Angular 应用程序中的响应式表单创建了一个可重用的自定义验证器。

要了解模板驱动表单和响应式表单中自定义验证器的示例,请参阅 Angular 中的自定义表单验证。

如果您想了解更多关于 Angular 的知识,请查看我们的 Angular 主题页面,了解练习和编程项目。


目录
相关文章
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
31 1
|
4月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
59 0
|
4月前
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
47 0
|
4月前
|
开发者 容器 Docker
JSF与Docker,引领容器化浪潮!让你的Web应用如虎添翼,轻松应对高并发!
【8月更文挑战第31天】在现代Web应用开发中,JSF框架因其实用性和灵活性被广泛应用。随着云计算及微服务架构的兴起,容器化技术变得日益重要,Docker作为该领域的佼佼者,为JSF应用提供了便捷的部署和管理方案。本文通过基础概念讲解及示例代码展示了如何利用Docker容器化JSF应用,帮助开发者实现高效、便携的应用部署。同时也提醒开发者注意JSF与Docker结合使用时可能遇到的限制,并根据实际情况做出合理选择。
43 0
|
4月前
|
前端开发 UED 开发者
深度剖析Angular表单控件:从模板驱动到响应式表单的最佳实践,带你全面掌握Angular表单处理机制,提升前端开发效率与用户体验的终极指南
【8月更文挑战第31天】本文通过代码示例详细介绍了 Angular 中两种主要的表单处理方式:模板驱动表单和响应式表单。模板驱动表单适用于简单场景,可在 HTML 模板中直接定义表单控件并实现数据绑定和验证。响应式表单基于 RxJS,提供更灵活的表单管理和复杂的逻辑处理。通过具体示例展示了每种方式的最佳实践,帮助开发者简化表单处理,提高开发效率和用户体验。
37 0
|
4月前
|
数据采集 前端开发 开发者
Angular表单控件详解:掌握模板驱动与响应式表单的精髓,让Web应用中的数据采集工作变得高效又简单,彻底告别繁琐的表单处理流程
【8月更文挑战第31天】表单是 Web 应用的关键组件,用于用户登录、注册及信息提交。Angular 作为成熟前端框架,提供了强大的表单处理功能,包括模板驱动与响应式表单。本文通过技术博客形式,详细介绍这两种表单控件,并提供示例代码,展示如何利用它们简化表单处理流程,提高开发效率。首先介绍简单的模板驱动表单,然后讲解基于 RxJS 的响应式表单,适用于复杂逻辑。通过本文,你将学会如何高效地使用 Angular 表单控件,提升应用的用户体验。
47 0
|
4月前
Angular 中的响应式表单:监听变化
Angular 中的响应式表单:监听变化
45 0
|
4月前
|
JavaScript 前端开发
如何在 Angular 中使用响应式表单
如何在 Angular 中使用响应式表单
23 0
|
4月前
|
JavaScript
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
38 0