Подтверждение пароля в Angular

#angularjs #input #валидация #auth

Есть форма регистрации с двумя полями: пароль и подтверждение пароля. Если нажать
кнопку с незаполненными полями, появится tooltip и красная обводка. Кроме того, даже
после расфокусирования формы при input:hover появляется подсказка с текстом ошибки.
Как сделать чтобы в точности такой же эффект появлялся когда пароли не совпадают?


(function() {
var validationApp = angular.module("validationApp", [])
validationApp.controller("ValidationCtrl", function() {
  
})

})()


  

    
    
    
  





CodePen
    

Ответы

Ответ 1

angular.module("validationApp", [])

.controller("ValidationCtrl", function ($scope) {
  $scope.submit = function (event) {
    console.log($scope.password);
    event.preventDefault();
  };
})

.directive('mySameAs', function () {
  return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModel) {
      ngModel.$validators.sameAs = function (modelValue, viewValue) {
        return modelValue === scope.$eval(attrs.mySameAs);
      };
      
      scope.$on('destroy', scope.$watch(attrs.mySameAs, function () {
        ngModel.$validate();
      }));
    }
  };
})
input {
  border: 1px solid silver;
}

.ng-dirty.ng-invalid {
  border-color: red;
}

.ng-dirty.ng-invalid-same-as {
  border-bottom-color: blue;
}

.error-msg {
  color: red;
  display: none;
}

.ng-dirty.ng-invalid-same-as ~ .error-msg.invalid-same-as {
  display: block;
}



  

    
    
    
    Passwords do not match
  



Ответ 2

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





Ответ 3

Воспользуйтесь плагином validation-match

https://github.com/TheSharpieOne/angular-validation-match