Сделал форму для смены пароля, в ней есть два поля пароля. Хотел бы проверять их валидность и соответствие друг другу. Сделал так:
<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>
Но такая проблема вылезла, у меня поля ng-valid, и ng-invalid подчеркиваются красным цветом. Соответственно если пароли не совпадают хотелось бы еще чтобы второе поле красным горело а не зеленым.
Пример того как сейчас
.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>