【Angular系列】5. 自定义input输入框组件

706 阅读1分钟

这篇我们自定义input输入框组件,同样支持NgModel和reactive forms,支持验证自定义message提醒,支持浮动label,支持自定义主题色等。

1. 第一步同样是新增一个input文件夹,新增相应的文件如下:

2. 定义input组件的输入输出:

3. 实现ControlValueAccessor,对NgModel和Reactive forms的支持:

4. 实现label的可浮动效果、实现主题配色体系:

5. 最后写一个sample样例如下:

github地址:github.com/KevinZhang1…

在线Demo地址:stackblitz.com/edit/x-inpu…