Angular模板是否区分大小写？<SELECT>无法获取值问题咨询

哈哈，这个坑我之前也踩过！虽然咱们都知道HTML标签名不区分大小写，但Angular的模板编译和指令匹配机制可是区分大小写的，这就是问题的核心，具体来说有这几个关键点：

• Angular的内置表单指令只认小写标签
  负责处理<select>值绑定的SelectControlValueAccessor指令，它的元素选择器明确是小写的select（比如规则里写的select:not([multiple])[ngModel]）。当你写<SELECT>的时候，Angular会把它当成和select完全不同的标签，根本不会绑定这个关键的表单访问器指令——没有这个指令，Angular就没法和下拉框同步值，自然拿不到选中的内容。

• 模板编译比浏览器转小写早一步
  不管是用JIT（浏览器里即时编译）还是AOT（提前编译），Angular都是先解析你写的模板字符串，再去处理DOM元素。浏览器虽然最后会把<SELECT>转成小写的<select>节点，但这一步是在Angular完成指令匹配之后才发生的。等浏览器转完，Angular早就错过了绑定表单逻辑的时机，所以值同步就失效了。

• Angular模板不依赖浏览器的HTML特性
  为了兼容服务器端渲染、Web Worker这些非浏览器环境，Angular自己实现了一套严格的模板解析规则，标签名、属性名的匹配都是区分大小写的。就像你不能把[(ngModel)]写成[(NGMODEL)]一样，标签名也必须用小写才能触发对应的内置指令。

说白了就是：HTML的大小写不敏感是浏览器的渲染特性，但Angular的模板系统有自己的规矩，得按它的要求来用小写标签，表单控件才能正常工作。

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