Измените classы и отобразите сообщение, когда форма отправлена ​​с помощью углового

Я использую ngMessages для отображения сообщений об ошибках с моей проверкой формы, и это работает.

Теперь моя проблема заключается в том, когда я отправляю форму, которую хочу изменить, чтобы classы были действительными (зеленая граница) до их нормального состояния, которое является просто css на входах. Кроме того, если все поля действительны, текстовое сообщение должно отображаться над формой, в которую была отправлена ​​форма, но она, похоже, не работает с $ valid.

Через несколько секунд сообщение исчезнет.

Plunker

мой код

CSS

input { background-color: #fff; border: 1px solid darkgray; margin-top: 20px; width: 400px; height: 45px; padding: 0 10px; } .invalid-field { border: 1px solid red; } .valid-field { border: 1px solid green; } .error { color: red; } .sent { color: green; } 

HTML / угловые

 
Your message has been sent!
Name is required
Name must be 2 characters long
Email is required
Email is not valid

Обновить

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

Пользователь правильно заполняет форму и отправляет VS. Пользователь нажимает «Отправить», затем правильно заполняет поле

Во втором случае поле не будет показывать зеленую границу valid-field .


Вы должны сделать функцию, которая проверяет допустимые поля и выполняет ее на отправке, а затем устанавливает флаг в true для classа global в вашей форме, который переопределит текущие valid / недействительные состояния

Вот рабочее решение

 //Validate States $scope.validateSuccessSubmit = function(){ if($scope.contactForm.nameField.$valid && $scope.contactForm.emailField.$valid && $scope.contactForm.$submitted) { $scope.formCompleted = true; } }; 

  

 /*CSS*/ .form-completed input{ border: 1px solid darkgray; } 

Предыдущий неверный ответ:

Просто добавьте условие !$submitted в class valid-field

 ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted, 'valid-field': contactForm.nameField.$valid && !contactForm.$submitted}" //And ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted, 'valid-field': contactForm.emailField.$valid && !contactForm.$submitted}" 

Используйте следующий код, он будет работать нормально, но вам нужно написать class css, например:

  .initial { 1px solid darkgray; } 

и используйте следующие html для ng-classа для ваших входных элементов.

  ng-class="{'invalid-field': contactForm.nameField.$touched && !contactForm.nameField.$valid, 'valid-field': contactForm.nameField.$valid&& !contactForm.$submitted , 'initial':contactForm.nameField.$valid && contactForm.$submitted}" ng-class="{'invalid-field': contactForm.emailField.$touched && !contactForm.emailField.$valid, 'valid-field': contactForm.emailField.$valid && !contactForm.$submitted , 'initial':contactForm.emailField.$valid && contactForm.$submitted}" 

И, наконец, я за «Ваше сообщение отправлено!» сообщение, которое вам нужно написать

  
Your message has been sent!