Показать красную рамку для всех недопустимых полей после отправки формы angularjs

У меня есть форма, в которой у меня есть некоторые поля ввода. Некоторые из них - это обязательные поля, а некоторые - электронная почта.

Я использую атрибут html5 required для обязательных полей и атрибут type = "email" для полей электронной почты.

Мой вопрос после нажатия кнопки отправки мне нужно показать красную рамку для всех недопустимых полей.

Это моя форма

<form name="addRelation">
  <label>First Name</label>
  <input type="text" placeholder="First Name" data-ng-model="model.firstName"     id="FirstName" name="FirstName" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/>
  <label>Last Name</label>
  <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">Last Name is required</span><br/>
  <label>Email</label>
  <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>

  <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" />  
  </form>

и моя функция сохранения.

$scope.save= function (model) {
    if ($scope.addRelation.$valid) {
        //form is valid- so save it to DB
    }
    else {
        //if form is not valid set $scope.addRelation.submitted to true
        $scope.addRelation.submitted=true;
    }
};
 })

Теперь, когда я нажимаю кнопку "Сохранить", не заполняя ничего, все ошибки (промежутки) отображаются. Но я хочу показать красную границу для всех недопустимых полей.

Я пробовал следующие случаи:

input.ng-dirty.ng-invalid{border:1px solid black;}

но это не удается, когда пользователь напрямую нажимает кнопку отправки (не касаясь полей ввода)

input.ng-invalid{border:1px solid black;}

это показывает красную рамку, как только пользователь открывает форму регистрации.

Пожалуйста, помогите.

Ответы

Ответ 1

Ссылка: Показать границу красного цвета для недопустимых полей ввода angualrjs

Я использовал ng-класс для всех полей ввода. ниже

<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

когда я нажимаю кнопку сохранения, я меняю значение newEmployee.submitted на true (вы можете проверить это в моем вопросе). Поэтому, когда я нажимаю на сохранение, класс с именем представлен добавляется ко всем полям ввода (есть некоторые другие классы, первоначально добавленные угловыми).

Итак, теперь мое поле ввода содержит классы, подобные этому

class="ng-pristine ng-invalid submitted"

теперь я использую ниже код css для показывать красную рамку во всех недопустимых полях ввода (после отправки формы)

input.submitted.ng-invalid
{
  border:1px solid #f00;
}

Спасибо!

Update:

Мы можем добавить ng-класс в элемент формы, а не применять его ко всем входным элементам. Поэтому, если форма отправлена, новый элемент (представленный) добавляется в элемент формы. Затем мы можем выбрать все недопустимые поля ввода, используя следующий селектор

form.submitted .ng-invalid
{
    border:1px solid #f00;
}

Ответ 3

Я создал рабочий пример CodePen, чтобы продемонстрировать, как вы могли бы достичь своих целей.

Я добавил ng-click в <form> и удалил логику с вашей кнопки:

<form name="addRelation" data-ng-click="save(model)">
...
<input class="btn" type="submit" value="SAVE" />

Здесь обновлен шаблон:

<section ng-app="app" ng-controller="MainCtrl">
  <form class="well" name="addRelation" data-ng-click="save(model)">
    <label>First Name</label>
    <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$invalid">First Name is required</span><br/>
    <label>Last Name</label>
    <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$invalid">Last Name is required</span><br/>
    <label>Email</label>
    <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
    <input class="btn" type="submit" value="SAVE" />  
  </form>
</section>

и код контроллера:

app.controller('MainCtrl', function($scope) {  
  $scope.save = function(model) {
    $scope.addRelation.submitted = true;

    if($scope.addRelation.$valid) {
      // submit to db
      console.log(model); 
    } else {
      console.log('Errors in form data');
    }
  };
});

Надеюсь, это поможет.