Confirmation of password in Angular
-
There is a form of registration with two fields: password and password confirmation. If you press a button with unfilled fields, there's tooltip and red leash. In addition, even after the shape is decorated
input:hoverThere's a clue with the wrong text. How to do it exactly the same Did the effect come when the passwords don't match?(function() { var validationApp = angular.module("validationApp", []) validationApp.controller("ValidationCtrl", function() {})
})()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="validationApp">
<form ng-controller="ValidationCtrl">
<input type="password" ng-model="password" required='' />
<input type="password" ng-model="repeat-password" required='' />
<input type="submit" />
</form>
</div>http://codepen.io/oceinic/pen/GoZwJR
-
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;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><div ng-app="validationApp" novalidate>
<form ng-controller="ValidationCtrl" ng-submit="submit($event)">
<input type="password" ng-model="password" required />
<input type="password" ng-model="repeatPassword" required my-same-as="password" />
<input type="submit" />
<span class="error-msg invalid-same-as">Passwords do not match</span>
</form>
</div>
