标签：自定义 form 验证 void 表单 组件 Angular

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
}

一般情况下，只需要处理writeValue和registerOnChange两个方法

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

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

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

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

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

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

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

最后

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

标签：自定义,form,验证,void,表单,组件,Angular
来源： https://www.cnblogs.com/boxrice/p/15059267.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。