[Angular] Create a custom validator for reactive forms in Angular
Also check: directive for form validation
User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a series of built-in validators such as required
or maxLength
etc. But very soon you have to build your own custom validators to handle more complex scenarios. In this lesson you're going to learn how to create such custom validators for Angular's reactive forms.
Basic validator is just a function.
import { ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms'; export function nameValidator(name: string): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const isValid = control.value === '' || control.value === name; if (isValid) {
return null;
} else {
return {
nameMatch: {
allowedName: name
}
};
}
};
}
Then you can use it with the validation in Reactvie form:
import { nameValidator } from './name.validator'; this.form = this.fb.group({
firstname: ['', [Validators.required, nameValidator('someone')]]
});
[Angular] Create a custom validator for reactive forms in Angular的更多相关文章
- [Angular] Create a custom validator for template driven forms in Angular
User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...
- Angular之响应式表单 ( Reactive Forms )
项目结构 一 首页 ( index.html ) <!doctype html> <html lang="en"> <head> <met ...
- [Angular] Create a custom pipe
For example we want to create a pipe, to tranform byte to Mb. We using it in html like: <div> ...
- [Angular2 Form] Angular 2 Template Driven Form Custom Validator
In this tutorial we are going to learn how we can also implement custom form field validation in Ang ...
- Angular Reactive Forms -- Model-Driven Forms响应式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档:https://v2.angul ...
- [Angular] Component architecture and Reactive Forms
It it recommeded that when deals with form component, we can create a container component to hold st ...
- [Angular2 Form] Model Driven Form Custom Validator
In this tutorial we are going to learn how simple it is to create custom form field driven validator ...
- Forms in Angular 2
Input handling is an important part of application development. The ng-model directive provided in A ...
- Part 13 Create a custom filter in AngularJS
Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...
随机推荐
- HDU-1789 Doing Homework again 贪心问题 有时间限制的最小化惩罚问题
题目链接:https://cn.vjudge.net/problem/HDU-1789 题意 小明有一大堆作业没写,且做一个作业就要花一天时间 给出所有作业的时间限制,和不写作业后要扣的分数 问如何安 ...
- python 爬虫简介
初识Python爬虫 互联网 简单来说互联网是由一个个站点和网络设备组成的大网,我们通过浏览器访问站点,站点把HTML.JS.CSS代码返回给浏览器,这些代码经过浏览器解析.渲染,将丰富多彩的网页呈现 ...
- django-xadmin使用之更改菜单url
环境:xadmin-for-python3 python3.5.2 django1.9.12 1. 在模块的adminx.py文件中增加以下代码: class AdminSettings(object ...
- html5缓存
HTML5 提供了两种在client存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 这些都是由 coo ...
- 我看Java二十年:它是怎样永远改变编程的。
转自jdon的小文章:来自Infoworld的一篇纪念mod=viewthread&tid=3042" target="_blank">Java诞生20周年 ...
- 一个美丽的java烟花程序
<img src="http://img.blog.csdn.net/20150625104525974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...
- LeetCode 107 Binary Tree Level Order Traversal II(二叉树的层级顺序遍历2)(*)
翻译 给定一个二叉树,返回从下往上遍历经过的每一个节点的值. 从左往右,从叶子到节点. 比如: 给定的二叉树是 {3,9,20,#,#,15,7}, 3 / \ 9 20 / \ 15 7 返回它从下 ...
- 基于express+redis高速实现实时在线用户数统计
作者:zhanhailiang 日期:2014-11-09 本文将介绍怎样基于express+redis高速实现实时在线用户数统计. 1. 在github.com上创建项目uv-tj.将其同步到本地: ...
- POJ 3450--Corporate Identity【KMP && 枚举】
Corporate Identity Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 5696 Accepted: 207 ...
- orm 通用方法——DeleteModel 主键删除
定义代码: /** * 描述:删除对象 * 作者:Tianqi * 日期:2014-09-17 * param:model 对象实例,包含主键 * return:int 受影响行数 * return: ...