Angular指令校验问题：TrimInputDirective选择器前缀要求如何解决？

我完全理解你的困扰——你这个TrimInputDirective的选择器是用来精准定位特定类型的表单输入框，并非自定义属性，却触发了TSLint的前缀校验错误。不用注释禁用规则也能解决，核心是调整TSLint的配置来适配这种原生元素+内置属性的复合选择器场景。

解决方案：修改TSLint的directive-selector规则配置 #

Angular的TSLint规则里，directive-selector默认只针对自定义属性/元素选择器要求前缀，但你的选择器是基于原生input元素+Angular内置formControlName属性的复合选择器，我们可以调整规则让它正确识别这种情况：

1. 打开项目根目录的tslint.json文件
2. 找到directive-selector规则，它的默认配置通常是这样的：

   "directive-selector": [
     true,
     "attribute",
     "myapp, if, file, use",
     "camelCase"
   ]
   

3. 将选择器类型从单一的"attribute"改成数组["attribute", "element"]，这样规则会同时允许属性选择器和元素选择器，并且对元素选择器不强制前缀（因为前缀要求是针对自定义元素/属性的）：

   "directive-selector": [
     true,
     ["attribute", "element"],
     "myapp, if, file, use",
     "camelCase"
   ]
   

修改后，TSLint会把你的input:not([type=checkbox])...[formControlName]选择器识别为元素选择器（结合属性过滤），不再要求添加指定前缀，同时还能保留对其他自定义指令选择器的前缀校验。

为什么这个方案可行？ #

Angular风格指南的前缀要求，本质是为了区分你自己开发的自定义指令和Angular内置指令、原生元素/属性。你的指令选择器是作用在原生input上，通过内置的formControlName属性过滤目标元素，不属于需要添加自定义前缀的场景，调整TSLint规则正好匹配这个需求，既解决了错误，又不破坏代码规范的初衷。

内容的提问来源于stack exchange，提问作者Mark Sandman