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

Я создаю приложение angular, для которого у меня установлены некоторые формы. У меня есть поля, которые должны быть полем перед отправкой. Поэтому я добавил "обязательно" на них:

<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>

Однако, когда я запускаю свое приложение, поля отображаются как "недействительные", а "ng-invalid" и "ng-invalid-required" классов еще до того, как кнопка "Отправить" была нажата или до того, как пользователь набрал что-либо в поля.

Как я могу убедиться, что тезис 2 класса не добавляется сразу, но как только пользователь отправил форму или когда он набрал что-то неправильно в соответствующем поле?

Ответ 1

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

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

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

Что в основном указывает, когда в поле было что-то введенное в какой-то момент с момента загрузки страницы и не было reset для отказа от $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 - когда вход формы не вставил с момента загрузки (или был reset через setPristine(true) в форме)
ng-invalid - при отказе какой-либо проверки (required, minlength, пользовательских и т.д.)

Аналогичным образом существует и ng-invalid-<name> для всех этих шаблонов и любых созданных пользовательских.

Ответ 2

Благодаря этому сообщению я использую этот стиль, чтобы удалить красную рамку, которая автоматически появляется при загрузке, когда отображается требуемое поле, но у пользователя не было возможности что-либо ввести:

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

Ответ 3

Так как поля пустые, они недопустимы, поэтому классы ng-invalid и ng-invalid-required добавлены правильно.

Вы можете использовать класс ng-pristine, чтобы проверить, были ли эти поля уже использованы или нет.

Ответ 4

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

Вы также можете использовать:
myForm.username. $загрязнен

Ответ 5

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

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