如何根据输入值长度为Angular输入框设置样式？

这里提供几种实用的实现方式，你可以根据需求选择：

方法1：模板内直接用 [ngClass] 绑定条件类 #

先在样式文件中定义需要的边框类：

/* 符合长度要求的样式 */
.input-valid {
  border: 2px solid #2ecc71;
}
/* 长度不足的样式 */
.input-invalid {
  border: 2px solid #e74c3c;
}
/* 默认样式 */
input {
  border: 1px solid #bdc3c7;
}

然后修改模板，通过模板变量获取输入值，动态绑定类：

<div *ngFor="let o of options">         
  <input 
    #inputRef
    type="text" 
    [ngClass]="{
      'input-valid': inputRef.value.length >= 3,
      'input-invalid': inputRef.value.length > 0 && inputRef.value.length < 3
    }" 
    placeholder="Search Value"
    (keyup)="search(o,$event)" 
  />              
</div>

方法2：直接用 [style] 绑定内联样式 #

如果样式逻辑简单，不需要额外定义CSS类，可以直接在模板中绑定内联样式：

<div *ngFor="let o of options">         
  <input 
    #inputRef
    type="text" 
    [style.border]="inputRef.value.length >=3 ? '2px solid #2ecc71' : (inputRef.value.length >0 ? '2px solid #e74c3c' : '1px solid #bdc3c7')"
    placeholder="Search Value"
    (keyup)="search(o,$event)" 
  />              
</div>

方法3：组件内封装逻辑（适合复杂判断） #

如果后续需要添加更多判断条件，建议把逻辑抽离到组件类中：
在组件 .ts 文件中添加方法：

getInputBorderClass(inputValue: string): string {
  if (inputValue.length >= 3) return 'input-valid';
  if (inputValue.length > 0) return 'input-invalid';
  return '';
}

然后模板中调用该方法：

<div *ngFor="let o of options">         
  <input 
    #inputRef
    type="text" 
    [ngClass]="getInputBorderClass(inputRef.value)"
    placeholder="Search Value"
    (keyup)="search(o,$event)" 
  />              
</div>

注意：原来模板中的 [ngClass]="{{}}" 是错误写法，Angular中动态绑定属性不需要额外的大括号包裹，直接写表达式即可。

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