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

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

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

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

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

28
angularjs forms javascript required

5 ответов

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

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

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

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

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

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> для всех этих шаблонов и любых пользовательских созданных.

61

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

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

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

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

1

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

вы также можете использовать:
myForm.имя пользователя:.$ dirty

0

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

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