Angular如何高效封装表单控件并提炼核心设计理念？

本文共计1932个文字，预计阅读时间需要8分钟。

前言：前端框架的强大无疑为开发者省去了不少烦恼，然而，随着UI库的丰富支持，部分后端开发者开始省去大量样式设计时间，纵然如此，业务的多样性使得框架本身无法预测，导致部分开发者陷入困境。

前言

前端框架的强大无疑给开发者省去了不少烦恼，又因比较完善的UI库支撑，让部分后端开发者能够省去大量样式设计的时间成本，纵然如此，业务的多变性是框架本身无法预料的，很多的控件功能在实际开发中总是不够完善和灵活，所以需要开发者结合业务需求进行再次封装这些UI控件/组件。

表单控件

常规组件只需要根据官方指引，写好数据传输的方式和订阅即可任意使用，表单控件有点特殊，按照常规方式写出来的组件使用在表单中，绑定ngModel或者formControlName，随之而来的是一个报错：

RROR Error: No value accessor for form control with name: 'userName'

ControlValueAccessor

Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM

只有实现了这个接口才可以完成像普通表单元素那样使用和验证。