In this tutorial we are going to learn how we can also implement custom form field validation in Angular 2 template driven forms, by creating our own custom validation directive. We are going to see how to write such directive and how its a best practive to extract the validation function to a separate function, so that it can also be used for model driven validation.

We are going to learn how we can configure the template driven custom validator directive into the Angular 2 Forms mechanism, by plugging the directive into the dependency injection system using NG_VALIDATORS and forwardRef.

import {Validator, NG_VALIDATORS, FormControl} from "@angular/forms";
import {validateDuration} from "./validateDuration";
import {Directive, forwardRef} from "@angular/core"; export const MIN_LENGTH_VALIDATOR = {
provide: NG_VALIDATORS,
multi: true,
useExisting: forwardRef(() => DurationValidator)
}; // target and duration with ngModel
@Directive({
selector: '[duration][ngModel]',
providers: [MIN_LENGTH_VALIDATOR]
})
export class DurationValidator implements Validator {
validate(c: FormControl): {[key: string]:any} {
return validateDuration(c);
}
}

use:

 Duration: <input type="number" name="duration" [(ngModel)]="duration" duration required>

[Angular2 Form] Angular 2 Template Driven Form Custom Validator的更多相关文章

  1. [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 ...

  2. [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 ...

  3. [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 HT ...

  4. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  5. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. {Django基础十之Form和ModelForm组件}一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 ModelForm

    Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Model ...

  7. Jquery组织Form表单提交之Form submission canceled because the form is not connected

    有时候导出Excel时需要根据某些条件筛选数据,然后将数据通过NPOI生成Excel并导出.组织数据时可以通过放到一个表单中,某些场景是使用脚本(如:jquery)组织一个form(通过字符串拼接), ...

  8. 基于Django Form源码开发自定义Form组件

    import copy import re class ValidateError(Exception): def __init__(self, detail): self.detail = deta ...

  9. [oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)

    1 在student_list添加一个a标签, <p><a href="/app01/add_student" class="btn btn-prima ...

随机推荐

  1. java(面向对象 )

    java面向对象的语言 对象:真实存在唯一的事物. 类:实际就是对某种类型事物的共性属性与行为的抽取. 面向对象的计算机语言核心思想: 找适合的对象做适合的事情. 如何找适合的对象: 1.sun已经定 ...

  2. [lougu1341]无序字母对

    Description: 给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. Solution: 欧 ...

  3. Linux网卡驱动框架及制作虚拟网卡

    1.概述 网卡驱动与硬件相关,主要负责收发网络的数据包,将上层协议传递下来的数据包以特定的媒介访问控制方式进行发送,并将接收到的数据包传递给上层协议. 网卡设备与字符设备,块设备不同,网络设备驱动程序 ...

  4. 今日SGU 5.10

    SGU 168 题意:从a矩阵求出b矩阵,规则直接看题目就行了,不好打字说明 收获:dp #include<bits/stdc++.h> #define de(x) cout<< ...

  5. 【习题 8-1 UVA - 1149】Bin Packing

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每个背包只能装两个东西. 而且每个东西都要被装进去. 那么我们随意考虑某个物品.(不必要求顺序 这个物品肯定要放进某个背包里面的. ...

  6. absolute、relative,toggle()

    測试代码例如以下: <div> <div class="global">不应用样式</div> <div class="glob ...

  7. 负载均衡器&amp;http正向代理

    透明的负载均衡器&http正向代理 * master-workers架构,http正向代理由独立的dns请求以及缓冲进程  * 使用epoll(ET)模式,採用全异步方式(双缓存,实现双向同一 ...

  8. PYTHON学习第四天课后总结:

    第三天学习课后总结: 今日重点: 流程控制 1,if 条件判断语句 2,while 循环 3,for 循环 一,if +条件判断语句: 1>   if+条件判断表达式: 子代码1 子代码2 子代 ...

  9. CMake编译Makefile

    以编译Libtif文件为例: 你可以用CMake编译libtiff,超简单,两个步骤. 参考文章 CharlesSimonyi,libtiff库的问题的答复

  10. [React & Testing] Snapshot testings

    For example we have a React comonent: -- A toggle button, we want to test. When it si toggle on, the ...