Angular:Reactive Form的使用方法和自定义验证器
本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括:
- Reactive Form创建方法
- 如何使用验证
- 自定义验证器
下面开始进入正文!
Reactive Form创建方法
首先我们需要使用FormBuilder创建一个FormGroup,就像这样:
registerForm: FormGroup;
constructor(
private fb: FormBuilder,
) {}
ngOnInit() {
this.registerForm = this.fb.group({
firstName: [''],
lastName: [''],
})
}
上面的firstName
和lastName
是由你自己取的,分别表示一个表单控件名称。他们的值都是一个数组,数组第一个参数表示初始值。如果你不给它赋予初始值,则给它一个空字符串:''。
然后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]*')],
})
}
可以使用“必要”验证器,也可以使用正则,你只需传入一个正则表达式就可以了。除此之外,还有minLength
和maxLength
等。
如果一个控件需要多个验证器,可以把它们放在一个数组里面:
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
方法还可以传入required
、minLength
等参数,分别对应不同的验证器;最后,在输入还未符合规则的时候,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的使用方法和自定义验证器的更多相关文章
- Flask系列09--Flask中WTForms插件,及自定义验证器
一.概述 django中的forms组件非常的方便,在flask中有WTForms的组件实现的也是类似的功能, 安装这个插件 二.简单使用 文档地址https://wtforms.readthedoc ...
- angular reactive form
这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...
- Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- flask 自定义验证器(行内验证器、全局验证器)
自定义验证器 在WTForms中,验证器是指在定义字段时传入validators参数列表的可调用对象,下面来看下编写自定义验证器. 行内验证器 除了使用WTForms提供的验证器来验证表单字段,我们还 ...
- Struts(二十五):自定义验证器
编程验证 Struts2提供了一个Validateable接口,可以使用Action类实现这个接口以提供编程验证: ActionSupport类已经实现了Validateable接口. public ...
- TP5 自定义验证器
TP内置验证功能提供两种验证方法 验证器(推荐) $validate = Validate::make([ 'id' => 'require|integer', ]); if ($validat ...
- thinkphp5.0自定义验证器
虽然我早就会些php基础语法,我套过数据,自己写的控制器层,不是用的api方式,那个公司是为了锻炼我,所以才那样做的,基本上的东西都是用的框架自带的,重来自己没有去封装过这些东西,所以编程思想上,还很 ...
- gin中如何自定义验证器
package main import ( "github.com/gin-gonic/gin" "github.com/gin-gonic/gin/binding&qu ...
- 9、 Struts2验证(声明式验证、自定义验证器)
1. 什么是Struts2 验证器 一个健壮的 web 应用程序必须确保用户输入是合法.有效的. Struts2 的输入验证 基于 XWork Validation Framework 的声明式验证: ...
随机推荐
- python入门学习笔记(一)
写在开头: A:python的交互式环境 ...
- 巧用Dictionary<TKey,TValue>,完成客户需求
前几天与客户沟通一个项目,客户对其中某个模块提了一个需求. 把从数据库中取出的对物品的统计重新拆分重新统计.鉴于用文字不能清除的表达需求,我将该需求画出来,便于理解. 需求如下图: 就是A,B,C D ...
- Yii2 Restful Api 401
采用Yii2 Restful Api方式为APP提供数据,默认你已经做好了所有的编码和配置工作.采用Postman测试接口: 出现这个画面的一个可能原因是:access_token的写法有误,如果你使 ...
- Linux上查看用户名和组并把特定用户放到特定的组之下
cat /etc/passwd //查看所有的用户信息 cat /etc/passwd|grep 用户名 //查看某一个用户的信息 cat /etc/group ...
- MysqL 主从事务数据安全之sync_binlog
sync_binlog:是MySQL 的二进制日志(binary log)同步到磁盘的频率(刷新二进制日志到磁盘),默认是0,意味着mysql并不刷新,由操作系统自己决定什么时候刷新缓存到持久化设置, ...
- 关于C语言文件操作
关于C语言的文件操作之前我也写过一篇博客来介绍,但是当时写的很不全面,只是简单的使用了一下 ,今天再从新学习一下. 1.文件的写 首先还是先看一个简单的例子: include<stdio.h&g ...
- AWS EC2 通过Linux终端:使用ssh连接到Linux实例
AWS的ubuntu主机登录用户是ubuntu 只能通过秘钥的方式登录 如果在linux终端通过ssh远程登录步骤如下: 假如申请EC2主机的时候下载的key名称叫my-key.pem,并保存在本地l ...
- 总结MySQL大数据量下如何进行优化
写在建库前: 在确定数据库业务后.建立数据库表格时,就应对一些常见问题有所考虑,以避免在数据增长一段时间后再做应对,可能造成时间及维护成本增加: 数据的月增量,年增量 数据的快速增长点 是否需要触发器 ...
- CDN网络架构
CDN(content delivery network 内容分发网络) 本质上就是提供缓存,使得用户总是能访问离他最近的服务器,akamai是世界上的第一家做CDN的公司 实例:构建CDN分发网络架 ...
- Linux CentOS安装配置MySQL数据库
没什么好说的,直接正面刚吧. 安装mysql数据库 a)下载mysql源安装包:wget http://dev.mysql.com/get/mysql57-community-release-el7- ...