Angular автоматически добавляет класс «ng-invalid» в «обязательные» поля

Поскольку входные данные пусты и, следовательно, недействительны при создании экземпляра, Angular корректно добавляет класс ng-invalid.

Правило CSS, которое вы можете попробовать:

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

В основном это означает, что когда в поле что-то было введено в какой-то момент с момента загрузки страницы и не было сброшено до исходного состояния $scope.formName.setPristine(true), и что-то еще не было введено, и оно недействительно, тогда текст превращается в red.

Другие полезные классы для форм Angular (см. входные данные для дальнейшего использования)

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, чтобы проверить, использовались ли поля уже или нет.

Попробуйте добавить класс для проверки динамически, когда форма была отправлена ​​или поле недействительно. Используйте имя формы и добавьте к входным данным атрибут '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

принятый ответ правильный .. для мобильных устройств вы также можете использовать это (ng-touched довольно ng-dirty)

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