详解Angular Reactive Form 表单验证

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了详解Angular Reactive Form 表单验证，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文我们将介绍 Reactive Form 表单验证的相关知识，具体内容如下：

  1. 使用内建的验证规则
  2. 动态调整验证规则
  3. 自定义验证器
  4. 自定义验证器 (支持参数)
  5. 跨字段验证

基础知识

内建验证规则

Angular 提供了一些内建的 validators，我们可以在 Template-Driven 或 Reactive 表单中使用它们。

目前 Angular 支持的内建 validators 如下：

  1. required - 设置表单控件值是非空的。
  2. email - 设置表单控件值的格式是 email。
  3. minlength - 设置表单控件值的最小长度。
  4. maxlength - 设置表单控件值的最大长度。
  5. pattern - 设置表单控件的值需匹配 pattern 对应的模式。

示例

required,Validators.minLength(3)]],email: ['',Validators.pattern('[a-z0-9._%+_]+@[a-z0-9.-]+')]] });

动态调整验证规则

required); myControl.setValidators([Validators.required,Validators.maxLength(6)]);

myControl.clearValidators();
myControl.updateValueAndValidity();

自定义验证器

自定义验证器 (支持参数)

跨字段验证

emailMatcher

if (emailControl.pristine || confirmControl.pristine) {
return null;
}

return emailControl.value === confirmControl.value ? null : { 'match': true };
}

emailGroup

required]],},{ validator: emailMatcher }) });

在介绍表单验证前，我们来看一下目前页面的显示效果：

表单验证

表单的内建验证规则，前面章节已经介绍过了，接下来我们来介绍在表单中如何 "动态调整验证规则" 。

动态调整验证规则

为了演示 "动态调整验证规则" 的功能，我新增了两个控件：

  1. radio - 用于让用户设置是否开启手机登录。
  2. tel - 当用户开启手机登录功能，用于让用户输入手机号码。

当用户开启手机登录功能，手机号码对应控件的验证规则，必须是必填且格式为合法的手机号码。当用户不开启手机登录功能时，手机号码对应控件将不是必填的。

新增 radio 控件

Box"> 开启手机登录

新增 tel 控件

 <div class="col-md-8"&gt;
  <input class="form-control"
      id="mobileId"
      type="text"
      placeholder="请输入手机号码"
      formControlName="mobile"/&gt;
  <span class="help-block" *ngIf="(mobile.touched || mobile.dirty) 
    && mobile.errors"&gt;
     <span *ngIf="mobile.errors.<a href="/tag/required/" target="_blank" class="keywords">required</a>"&gt;
       请输入手机号码
     </span>
     <span *ngIf="mobile.errors.minlength"&gt;
       手机号码格式不正确
     </span>
  </span>
 </div>

动态调整验证规则功能

this.checkMobile(value)); }

checkMobile(enableMobile: string): void {
const mobileControl = this.signupForm.get('mobile');

enableMobile === "1" ?
mobileControl.setValidators([Validators.required,Validators.pattern('1(3|4|5|7|8)\d{9}')]) :
mobileControl.clearValidators();

mobileControl.updateValueAndValidity();
}

介绍完如何动态调整验证规则，接下来我们来介绍如何 "自定义验证器"。

自定义验证器

为了演示 "自定义验证器" 的功能，我新增了一个控件：

number - 用于让用户设置是年龄信息。

当让用户手动输入年龄信息时，我们需要设置一个有效的年龄范围，比如 (18 - 120)。此时我们就需要通过自定义验证器来实现上述功能。

新增 number 控件

<div class="col-md-8">
<input class="form-control"
id="ageId"
type="number"
placeholder="请输入年龄"
formControlName="age"/>
<span class="help-block" ngIf="(age.touched || age.dirty) && age.errors">
<span ngIf="age.errors.range">
输入年龄不合法

自定义验证器模板

新增 ageValidator 验证器

120)) { return { 'range': true,min: 20,max: 120 }; } return null; }

使用 ageValidator 验证器

我们的 ageValidator 自定义验证器，虽然已经实现了。细心的读者应该会发现，在 ageValidator 验证器内部，我们写死了年龄的边界值 (最小值与最大值)。理想的情况下，应该能够让用户自行设定边界值。因此接下来，我们来优化一下 ageValidator 验证器。

自定义验证器 (支持参数)

自定义验证器模板 (支持参数)

新增 ageRange 验证器工厂

{ let age = c.value; if (age && (isNaN(age) || age < min || age > max)) { return { 'range': true,min: min,max: max }; } return null; } }

使用 ageRange 验证器工厂

介绍完如何自定义验证器，接下来我们来介绍如何实现 "跨字段验证" 的功能。

跨字段验证

在日常生活中，在注册表单中，经常要让用户再次输入同样的字段值，比如登录密码或邮箱地址的值。针对这种场景，我们就需要验证两个控件的输入值是否一致，这时我们就要引入跨字段验证的功能。

为了演示 "跨字段验证" 的功能，我新增了一个控件：

  1. email - 用于让用户确认输入的邮箱地址

新增 email 控件

required"> 请输入邮箱地址 required && emailGroup.errors?.match"> 两次输入的邮箱地址不一致

新增 emailMatcher

新增 emailGroup

更新模板

required"> 请输入邮箱地址 required && email.errors.email"> 请输入有效的邮箱地址

上面代码中，有以下几个问题需要注意：

  1. Form Group 是可以嵌套使用的。

我们通过 formGroupName="groupName" 语法来绑定内嵌的 Form Group。

邮箱不匹配的信息是存在 emailGroup 对象的 errors 属性中，而不是存在 confirmEmail 对象的 errors 属性中。

required && emailGroup.errors?.match"> 两次输入的邮箱地址不一致

我有话说

怎么会监听表单值的变化？

Reactive Form

this.form.valueChanges.subscribe(data => {
console.log('Form changes',data)
});
}
}

Template-driven Form

模板

required [(ngModel)]="user.name"> required [(ngModel)]="user.age">

组件类

ngAfterViewInit() {
this.form.control.valueChanges
.debounceTime(500)
.subscribe(values => this.doSomething(values));
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

angularangularangularjsReactive表单验证

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作