Angular中原始时的样式输入元素

【问题标题】：Style input element when pristine in AngularAngular中原始时的样式输入元素
【发布时间】：2026-01-06 18:40:01
【问题描述】：

嗨，我有这个 css 类，当需要输入字段并且输入字段无效时，它会给出一个红色边框。当输入字段变为有效时，它会变为绿色。

CSS

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

HTML

<input
              type="text"
              class="form-control"
              placeholder="Vehicle Code"
              [formControl]="codeControl"
              required
            />

我现在需要的是在尚未触摸时将左边框设置为其他颜色。因为就我现在所拥有的，在页面加载时，默认左边框为红色，并在验证后变为绿色。

【问题讨论】：

标签： css angular

【解决方案1】：

您可以使用 ngStyle 或 ngClass。

对于这个例子，我使用了 ngClass（我的首选方法）。

组件.css：

.valid {
  border-left: 5px solid #42A948;
}

.required {
  border-left: 5px solid #a94442;
}

组件.html

<form [formGroup]="form">
  <input 
    type="text" 
    [formControl]="name" 
    [ngClass]="{'required': name.invalid && (name.dirty || name.touched), 'valid': name.valid && (name.dirty || name.touched)}"
  >
</form>

组件.ts

export class AppComponent  {
  constructor() { }

  form = new FormGroup({
    name: new FormControl('', Validators.required)
  });

  get name(): AbstractControl {
    return this.form.get('name')
  } 
}

我在这里也放了一个 Stackblitz 供您参考，如下：

https://stackblitz.com/edit/angular-5xsg7r

快乐编码:-)

【讨论】：