本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括:

  • Reactive Form创建方法
  • 如何使用验证
  • 自定义验证器

下面开始进入正文!

Reactive Form创建方法

首先我们需要使用FormBuilder创建一个FormGroup,就像这样:

registerForm: FormGroup;
constructor(
private fb: FormBuilder,
) {}
ngOnInit() {
this.registerForm = this.fb.group({
firstName: [''],
lastName: [''],
})
}

上面的firstNamelastName是由你自己取的,分别表示一个表单控件名称。他们的值都是一个数组,数组第一个参数表示初始值。如果你不给它赋予初始值,则给它一个空字符串:''。

然后HTML页面就像这样:

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
<label>FirstName:</label>
<input formControlName="firstName">
<label>LastName:</label>
<input formControlName="lastName">
<button type="submit">Submit</button>
</form>

这样就创建了一个非常简单的表单!

如何使用验证

表单的输入项经常是要进行验证的,那该怎么验证呢?

其实很简单,Angular已经为我们写好了一些常用的验证器,就像这样使用就可以了:

ngOnInit() {
this.registerForm = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.pattern('[A-Za-z0-9]*')],
})
}

可以使用“必要”验证器,也可以使用正则,你只需传入一个正则表达式就可以了。除此之外,还有minLengthmaxLength等。

如果一个控件需要多个验证器,可以把它们放在一个数组里面:

lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]]

如果你希望在输入时得到一些提示,可以这样写你的HTML:

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
<label>FirstName:</label>
<input formControlName="firstName">
<p *ngIf="registerForm.controls.firstName.touched && registerForm.controls.firstName.invalid">
This field is required!
</p>
<label>LastName:</label>
<input formControlName="lastName">
<p *ngIf="registerForm.controls.lastName.hasError('pattern')">
Invalid input!
</p>
<button type="submit" [disabled]="!registerForm.valid">Submit</button>
</form>

第一个控件,在你“touch”过又为空的情况下会给出提示;第二个控件,在输入不符合正则表达式规则的情况下给出提示,hasError方法还可以传入requiredminLength等参数,分别对应不同的验证器;最后,在输入还未符合规则的时候,Submit按钮是处于禁用状态的。

Angular提供的几个验证器在实际项目中往往是不够用的,因此我们需要自定义验证器,以满足我们的业务需求!

自定义验证器

验证器其实就是一个有着return的方法!

现在我们来写一个验证器,验证一个网址输入框的值是否符合规则:

export function validateUrl(control: AbstractControl){
if(control.value){
if(!control.value.startsWith('www') || !control.value.includes('.io')){
return {
inValidUrl: true
}
}
}
return null;
}

我们测试输入值是否以“www”开头,并且包含“.io”。然后使用方法跟Angular提供的验证器一样:

this.registerForm = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]],
website: ['', validateUrl], // <---
})

然后,如果你希望在输入不符合validateUrl验证器规则时得到提示,你可以这样写你的HTML:

<label>Website:</label>
<input formControlName="website">
<p *ngIf="registerForm.controls.website.hasError('inValidUrl')"> //<---
Url must starts with www and includes .io
</p>

hasError方法的参数就是validateUrl验证器返回对象的key。

OK,今天的内容就到这里。

Angular:Reactive Form的使用方法和自定义验证器的更多相关文章

  1. Flask系列09--Flask中WTForms插件,及自定义验证器

    一.概述 django中的forms组件非常的方便,在flask中有WTForms的组件实现的也是类似的功能, 安装这个插件 二.简单使用 文档地址https://wtforms.readthedoc ...

  2. angular reactive form

    这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...

  3. Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  4. flask 自定义验证器(行内验证器、全局验证器)

    自定义验证器 在WTForms中,验证器是指在定义字段时传入validators参数列表的可调用对象,下面来看下编写自定义验证器. 行内验证器 除了使用WTForms提供的验证器来验证表单字段,我们还 ...

  5. Struts(二十五):自定义验证器

    编程验证 Struts2提供了一个Validateable接口,可以使用Action类实现这个接口以提供编程验证: ActionSupport类已经实现了Validateable接口. public ...

  6. TP5 自定义验证器

    TP内置验证功能提供两种验证方法 验证器(推荐) $validate = Validate::make([ 'id' => 'require|integer', ]); if ($validat ...

  7. thinkphp5.0自定义验证器

    虽然我早就会些php基础语法,我套过数据,自己写的控制器层,不是用的api方式,那个公司是为了锻炼我,所以才那样做的,基本上的东西都是用的框架自带的,重来自己没有去封装过这些东西,所以编程思想上,还很 ...

  8. gin中如何自定义验证器

    package main import ( "github.com/gin-gonic/gin" "github.com/gin-gonic/gin/binding&qu ...

  9. 9、 Struts2验证(声明式验证、自定义验证器)

    1. 什么是Struts2 验证器 一个健壮的 web 应用程序必须确保用户输入是合法.有效的. Struts2 的输入验证 基于 XWork Validation Framework 的声明式验证: ...

随机推荐

  1. python入门学习笔记(一)

    写在开头:         A:python的交互式环境                                                                         ...

  2. 巧用Dictionary<TKey,TValue>,完成客户需求

    前几天与客户沟通一个项目,客户对其中某个模块提了一个需求. 把从数据库中取出的对物品的统计重新拆分重新统计.鉴于用文字不能清除的表达需求,我将该需求画出来,便于理解. 需求如下图: 就是A,B,C D ...

  3. Yii2 Restful Api 401

    采用Yii2 Restful Api方式为APP提供数据,默认你已经做好了所有的编码和配置工作.采用Postman测试接口: 出现这个画面的一个可能原因是:access_token的写法有误,如果你使 ...

  4. Linux上查看用户名和组并把特定用户放到特定的组之下

    cat /etc/passwd             //查看所有的用户信息 cat /etc/passwd|grep 用户名       //查看某一个用户的信息 cat /etc/group   ...

  5. MysqL 主从事务数据安全之sync_binlog

    sync_binlog:是MySQL 的二进制日志(binary log)同步到磁盘的频率(刷新二进制日志到磁盘),默认是0,意味着mysql并不刷新,由操作系统自己决定什么时候刷新缓存到持久化设置, ...

  6. 关于C语言文件操作

    关于C语言的文件操作之前我也写过一篇博客来介绍,但是当时写的很不全面,只是简单的使用了一下 ,今天再从新学习一下. 1.文件的写 首先还是先看一个简单的例子: include<stdio.h&g ...

  7. AWS EC2 通过Linux终端:使用ssh连接到Linux实例

    AWS的ubuntu主机登录用户是ubuntu 只能通过秘钥的方式登录 如果在linux终端通过ssh远程登录步骤如下: 假如申请EC2主机的时候下载的key名称叫my-key.pem,并保存在本地l ...

  8. 总结MySQL大数据量下如何进行优化

    写在建库前: 在确定数据库业务后.建立数据库表格时,就应对一些常见问题有所考虑,以避免在数据增长一段时间后再做应对,可能造成时间及维护成本增加: 数据的月增量,年增量 数据的快速增长点 是否需要触发器 ...

  9. CDN网络架构

    CDN(content delivery network 内容分发网络) 本质上就是提供缓存,使得用户总是能访问离他最近的服务器,akamai是世界上的第一家做CDN的公司 实例:构建CDN分发网络架 ...

  10. Linux CentOS安装配置MySQL数据库

    没什么好说的,直接正面刚吧. 安装mysql数据库 a)下载mysql源安装包:wget http://dev.mysql.com/get/mysql57-community-release-el7- ...