如何在 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 falseconsole.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 主题页面,了解练习和编程项目。

这篇关于如何在 Angular 中为响应式表单创建自定义验证器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/732116

相关文章

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象,这是S

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h