Made a form for changing the password, it has two password fields. I would like to check their validity and compliance with each other. Did so:

<p> <input class="form-control" name="password" ng-model="pass1" placeholder="Пароль администратора" required type="password" > </p> <p> <input class="form-control" name="retype" ng-model="pass2" placeholder="Повторите пароль" required type="password" > </p> <div class="bg-danger msg" ng-show="pass1 != pass2">Пароли не совпадают</div>

But such a problem got out, I have ng-valid fields, and ng-invalid are underlined in red. Accordingly, if the passwords do not match, I would also like the second field to be red and not green.

Example of how now

 .ng-invalid.ng-dirty { border-color: #fa787e; } .ng-valid.ng-dirty { border-color: #3c763d; ; } 
 <!DOCTYPE html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@3.3.6" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <link href="style.css" rel="stylesheet" /> <script src="script.js"></script> </head> <body ng-app=""> <p> <input type="password" required="" placeholder="Пароль администратора" ng-model="pass1" name="password" class="form-control" /> </p> <p> <input type="password" required="" placeholder="Повторите пароль" ng-model="pass2" name="retype" class="form-control" /> </p> <div ng-show="pass1 != pass2" class="bg-danger msg">Пароли не совпадают</div> </body> </html>

    2 answers 2

    One solution is to write your own directive, which will determine whether the model has a valid value or not.

    For this, it must require that it be used with the ngModel directive. That is, the description must be set

     require: 'ngModel'

    With such a record, the fourth parameter in the link function is the controller of the ngModel directive

    Further, in the link function, which is executed when a directive is associated with a specific DOM element, you need to add a validator to the list of validators of the model controller

     ctrl.$validators.sameAs = function(modelValue, viewValue) { return scope.$eval(attrs.sameAs) == viewValue; };

    In the validator itself, we simply check that the value for comparison is the same as that entered by the user.

    It remains to add a response to changes in the main field, for this you can add $watch , in which you call $validate() on the model controller to start the check.

     scope.$watch(attrs.sameAs, function() { ctrl.$validate(); });

    Example assembly:

     angular.module('app', []) .directive('sameAs', function() { return { require: 'ngModel', link: function(scope, elem, attrs, ctrl) { scope.$watch(attrs.sameAs, function() { ctrl.$validate(); }); ctrl.$validators.sameAs = function(modelValue, viewValue) { return scope.$eval(attrs.sameAs) == viewValue; }; } } }); 
     .ng-invalid.ng-dirty { border-color: #fa787e; } .ng-valid.ng-dirty { border-color: #3c763d; ; } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@3.3.6" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <form name="form" ng-app="app"> <p> <input type="password" required="" placeholder="Пароль администратора" ng-model="pass1" name="password" class="form-control" /> </p> <p> <input type="password" required="" placeholder="Повторите пароль" ng-model="pass2" name="retype" same-as="pass1" class="form-control" /> </p> <div ng-show="pass1 != pass2" class="bg-danger msg">Пароли не совпадают</div> <pre class="bg-danger msg">errors: {{form.retype.$error|json}}</pre> </form>

      Either there is an easier option, or I misunderstood something.

       $scope.exp = '\\d+'; // регулярка

      Regular check and password match check

       New:<input name="newpassword" type="password" ng-model="user.newpassword" ng-pattern="exp" /> Repeat:<input name="newpassword2" type="password" ng-model="user.newpassword2" ng-pattern="user.newpassword" />
      • That is, the password can only be from numbers? :) - Grundy
      • @Grundy, so regular. We can make only from letters :) - fedornabilkin
      • And if you need a password like \s+ ? :) - Grundy
      • @Grundy, I do not understand, is this some kind of trick? Regular use in the first pattern. Regularly set any template. Either only numbers, or only letters, if necessary, then numbers, letters (uppercase, lowercase), characters, and even the minimum number of characters. - fedornabilkin
      • I mean, if you enter the password \s+ in the first field, then this value can be used as a regular expression, which means any string of spaces matches it - Grundy