Angular提供了一套非常强大的表单验证库(vue和react都需要第三方库的支持),可以非常方便简单实现web应用程序中的表单验证功能。但是如何让我们自定义的组件也支持验证呢?

我遇到一个需求是封装WangEditor这个富文本编辑器放到表单中。

这种需求是非常常见的,Angular给我们提供了ControlValueAccessor接口,我们可以很方便的实现自定义验证功能

理解ControlValueAccessor

用官方的话来说,ControlValueAccessor是充当 Angular 表单 API 和 DOM 中的原生元素之间的桥梁

这个接口提供了四个方法

interface ControlValueAccessor {
writeValue(obj: any): void
registerOnChange(fn: any): void
registerOnTouched(fn: any): void
setDisabledState(isDisabled: boolean)?: void
}

一般情况下,只需要处理writeValueregisterOnChange两个方法

writeValue是formGroup把值传递给自定义组件,自定义组件需要根据这个值处理对应的显示状态。

registerOnChange的参数是一个Function,需要在组件状态修改的时候,调用这个Function来把组件的值传递给formGroup

注册Provider使当前的接口处理生效

如果是单纯的实现了这个接口,是无法生效的。需要在模块注册或者组件上的Attribute中去注册NG_VALUE_ACCESSOR值为当前组件。

  providers: [{
provide: NG_VALUE_ACCESSOR, useExisting: QWangEditorComponent, multi: true
}]

做完这一步后,这个组件就支持了Angular的表单验证功能了。

在表单中,加上formControlName属性,自定义组件的功能就可以和formGroup中的对应属性实现双向绑定了,并支持表单验证了。

最后

欢迎关注我的公众号【青城同学】,不定时和你分享我各种技术和非技术的东西

让Angular自定义组件支持form表单验证的更多相关文章

  1. Django(5) session登录注销、csrf及中间件自定义、django Form表单验证(非常好用)

    一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie 1.数据库Session 1 2 3 4 5 ...

  2. JS组件系列——Form表单验证神器: BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  3. day75 form 组件(对form表单进行输入值校验的一种方式)

    我们的组件是什么呢 select distinct(id,title,price) from book ORM: model.py class Book(): title=model.CharFiel ...

  4. Form表单验证组件

    Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

  5. python26:自定义form表单验证

    一.自定义Form的原理 1.1 各种form表单验证比较 只有python提供了form表单验证,其他的都没有提供.django提供的功能还不够强大.最强大的是微软的ASP.NET!我们可以自己写一 ...

  6. python_way day19 HTML-day5 (form表单验证,CSRF,cookie,session,缓存)

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  7. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  8. vue elementui form表单验证

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

  9. Django基础之Form表单验证

    Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from ...

随机推荐

  1. 使用js获取checkbox控件在GridView中的第几行

    这次的知识点是如何使用js获取checkbox控件所在的是第几行!!! 我们可以使用 JavaScript 中自带的 rowIndex 和 cellIndex 来获取行和列的键值 (从0开始) 这两个 ...

  2. Python_selenium页面元素整合设计经验

  3. Java 反射编程(上)

    文章目录 反射的泛型就是用`? `来描述 反射与类的操作 (取得父类信息) 取得父类信息 1. 获得本类的包名称: 2. 取得父类的Class 对象 3. 取得父类接口 案例: 使用上述方法 反射与类 ...

  4. vue3.0 props

    .orange { color: rgba(255, 165, 0, 1) } Vue3.0 props 1.你是否遇到了,引用props数据报错的问题? 在Vue3.0中,采用了proxy,让很多数 ...

  5. 想自己写框架?不了解Java注解机制可不行

    无论是在JDK还是框架中,注解都是很重要的一部分,我们使用过很多注解,但是你有真正去了解过他的实现原理么?你有去自己写过注解么? 概念 注解(Annotation),也叫元数据.一种代码级别的说明.它 ...

  6. 入门Kubernetes - .Net Core 运行

    前言: 之前文章 对Kubernetes 的一些基础概念及在windows下的环境搭建,接下来把.Net Core 运行到Kubernetes 中,在实际的操作中,对Kubernetes 的进一步学习 ...

  7. Hadoop - 彻底解决警告:WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform...

    目录 1 - 在日志配置文件中忽略警告 - 有效 2 - 指定本地库的路径 - 无效 3 - 不使用 Hadoop 本地库 - 无效 4 - 替换 Hadoop 本地库 - 有效 5 - 根据源码,编 ...

  8. DHCP的简单介绍与配置

    一.DHCP简介 二.DHCP报文类型 三.DHCP工作原理 四.实例操作 一.DHCP简介 DHCP(Dynamic Host Configuration Protocol),动态主机配置协议,是一 ...

  9. CSS3转换(transform)基本用法介绍

    一个炫酷的网页离不开css的transform.transition.animation三个属性,之前一直没有涉及到这块内容,刚好最近要做一个相关东西,趁此机会好好学一学这三个属性. 一.功能 实现元 ...

  10. 36、网卡绑定bond

    注意:虚拟机需要网卡模式为同一模式,否则无法进行通信: 36.1.mode0(平衡负载模式): 平时两块网卡均工作,且自动备援,但需要在与服务器本地网卡相连的交换机设备上进行端口聚合来支持绑定技术. ...