Angular实现文本框失焦未输入时变色的无TS函数方案

这有个纯模板层面的巧妙解法，完全不用在.ts文件里写额外函数，利用Angular自带的ngModel状态属性就能搞定：

<input type="text" class="form-control required" 
       [(ngModel)]="formName" 
       #nameCtrl="ngModel"
       [ngClass]="{'testRed': !formName && nameCtrl.touched}">

原理说明： #

• #nameCtrl="ngModel"：创建一个模板引用变量，绑定当前输入框的ngModel实例，这样就能访问它的内置状态属性。
• nameCtrl.touched：这是Angular表单控件的内置状态，只有当用户聚焦过输入框并失焦后，它才会变为true；初始状态下是false。
• 初始时，虽然formName为空，但nameCtrl.touched是false，所以testRed类不会被添加，输入框保持required类的黄色背景。
• 当用户点击输入框（获得焦点）后又离开（失焦），如果此时formName仍然为空，!formName && nameCtrl.touched的结果就是true，testRed类会被自动应用，背景变成红色。

这样完美符合你的需求，全程不需要在组件类里写任何逻辑函数~

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