由于输入是空的，因此在示例化时无效，Angular正确地添加了ng-invalid类。
你可以尝试的CSS规则：

input.ng-dirty.ng-invalid {
  color: red
}

这基本上是说，当字段在页面加载后的某个时候输入了一些东西，并且没有被$scope.formName.setPristine(true)重置为原始状态，并且还没有输入一些东西，并且它是无效的，那么文本就会变成red。
其他对Angular表单有用的类（参见input for future reference）
ng-valid-maxlength-当ng-maxlength通过时
ng-valid-minlength-当ng-minlength通过时
ng-valid-pattern-当ng-pattern通过时
ng-dirty-当表单在加载后有输入时
ng-pristine-当表单输入在加载后没有插入任何内容时（或者它通过表单上的setPristine(true)重置）
ng-invalid-当任何验证失败时（required、minlength、自定义验证等）
同样，所有这些模式和任何创建的自定义模式也有ng-invalid-<name>。

感谢这篇文章，我使用这种风格来删除当显示必填字段时自动出现的红色边框，但用户没有机会输入任何内容：

input.ng-pristine.ng-invalid {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow:none;
}

由于字段是空的，它们是无效的，因此ng-invalid和ng-invalid-required类被正确添加。
您可以使用类ng-pristine来检查字段是否已经被使用。

以下方法是针对旧版AngularJS的：

当表单已提交或字段无效时，尝试动态添加验证类。使用表单名称并将“name”属性添加到输入中。Bootstrap示例：

<div class="form-group" ng-class="{'has-error': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
    <label class="col-sm-2 control-label" for="username">Username*</label>
    <div class="col-sm-10 col-md-9">
        <input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
    </div>
</div>

同样重要的是，您的表单具有ng-submit=""属性：

<form name="myForm" ng-submit="checkSubmit()" novalidate>
 <!-- input fields here -->
 ....

  <button type="submit">Submit</button>
</form>

您还可以在表单中添加一个可选的验证函数：

//within your controller (some extras...)

$scope.checkSubmit = function () {

   if ($scope.myForm.$valid) {
        alert('All good...'); //next step!
          
   }
   else {
        alert('Not all fields valid! Do something...');
    }

 }

现在，当您加载应用程序时，类'has-error'仅在提交表单或触摸字段时才会添加。而不是：
!myForm.username.$pristine
您还可以用途：
myForm.username.$dirty

适用于新Angular 2+

这是基于Bootstrap 5.3和Angular 15/16的，将来可能会改变。

<div class="form-group">
  <label>Password</label>
  <input type="password" formControlName="password" class="form-control" [ngClass]="{'is-invalid': password?.errors != null}">
</div>

在组件表单中，确保你已经将myForm修改为你需要的表单变量。

get password() { return this.myForm.get("password") }

公认的答案是正确的。对于移动的，你也可以使用这个（ng-touched rather ng-dirty）

input.ng-invalid.ng-touched{
  border-bottom: 1px solid #e74c3c !important; 
}