AngularJS, вопрос о проверке формы

У меня есть форма, в которой пользователь должен ввести 2 раза свой адрес электронной почты. Я нашел в Интернете (но не смог найти ссылку) какой-то угловой код, делающий то, что я хотел. Единственная проблема заключается в том, что когда 2 электронных письма совпадают, один вход все еще получил класс

.ng-invalid.ng грязный

Поэтому я не могу отправить форму.

Мой код следующий:

CSS:

.ng-invalid.ng-dirty{
    border-color: #FA787E;
}

.ng-valid.ng-dirty{
    border-color: #78FA89;
}

HTML:

 <div ng-app="myApp">
      <form name="formTemplate" novalidate>
        <input id="email1" type="email" ng-model="currentForm.email1" name="email1" required>
        <span ng-show="formTemplate.email1.$error.required && formTemplate.email1.$dirty">required</span>
        <span ng-show="!formTemplate.email1.$error.required && formTemplate.email1.$error.email1 && formTemplate.email1.$dirty">invalid email</span>  
        <input id="email2" type="email" name="email2" ng-model="currentForm.email2" same-email required>
        <span ng-show="formTemplate.email2.$error.required && formTemplate.email2.$dirty">Please confirm your email.</span>
        <span ng-show="!formTemplate.email2.$error.required && formTemplate.email2.$error.noMatch && formTemplate.email1.$dirty">Emails do not match.</span>
      </form>
    </div>

JavaScript:

var app = angular.module('myApp', ['UserValidation']);

angular.module('UserValidation', []).directive('sameEmail', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var noMatch = viewValue != scope.formTemplate.email1.$viewValue;
                ctrl.$setValidity('noMatch', !noMatch)
            })
        }
    }
})

Вот jsfiddle: http://jsfiddle.net/malamine_kebe/pq6fw04v/

Источник

1 ответ

Я обновляю ваш jsfiddle. Вы не возвращаете значение из ctrl.$parsers.unshift,

ctrl.$parsers.unshift(function (viewValue, $scope) {
            var noMatch = viewValue != scope.formTemplate.email1.$viewValue;
            ctrl.$setValidity('noMatch', !noMatch);
            return noMatch;
        })

Обновлен jsfiddle

Источник
Другие вопросы по тегам