Angular：模板组件是否区分大小写

Question

This is a follow up question from an earlier post. In this post I ran into a problem where I could not get the value from a <select> element. The solution turned out to be embarrassingly simple. Use lowercase <select> in the Angular template instead of uppercase <SELECT> .

We all know HTML is case insensitive, which leads me to my question. Why was I unable to get the value of the select when the element was <SELECT> , are Angular templates case sensitive?

When I inspect the element in the DOM regardless of whether I used <SELECT> or <select> , the element is always rendered in lowercase. Which from my understanding is expected standard browser behavior. This further leads to my suspicion that the behavior I experienced is a result of something Angular is doing.

I've scoured the internet trying to find an explanation for this, but have been unable to find an explanation. Almost immediately after asking the original question, user JBNizet, was able to point out my mistake in the HTML. It is that level of insight and understanding of the relationship between HTML templates and Angular I am trying to gain.

Answer 1

Are template components case sensitive?

Yes, the templates are case-sensitive in Angular. You have to write ngIf , for example, in order to trigger parsing it as a directive with the selector [ngIf] . ngif or NGIF would not work.

Using SELECT works as expected wihout a problem. The culprit is the control value accessor for the select element, which has a selector specified as something like select[formControlName] , which does not match <SELECT formControlName=foo> .