Cannot hide the match messages in Angular password form - angularjs

Question

Hi, I got a problem I want to show the messages only when passwords match or not match but the messages appear all the time any suggestions? And I would like to not be able to click the button if the passwords are different!
#*<form name="form" ng-submit="vm.login()" role="form">*#
<form accept-charset="UTF-8" role="form" id="login-recordar" ng-submit="vm.login()">
#*New password field!*#
<div>
<div class="form-group input-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i><label for="password1">New Password</label>
</span>
<input class="form-control" placeholder="Password" name="password" type="password" data-toggle="popover" data-trigger="focus" data-content="Minimum 8 characters long and should contain at least one (small- and capital letter and number)." id="password" value="" required="" autofocus="" onkeypress="capLock(event)" ng-model="mAddEditView.User.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/" />
</div>
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
<span id="divMayus" style="visibility:hidden">Caps Lock is on!</span>
</div>
#*Confirm Password field!*#
<div>
<div class="form-group input-group" ng-class="{ 'has-error': form.password1.$dirty && form.password1.$error.required }">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i><label for="password1">Confirm Password</label>
</span>
<input class="form-control" placeholder="Password" name="password1" type="password" data-toggle="popover" data-trigger="focus" data-content="The password should match." id="password1" value="" required="" onkeypress="capLock(event)" ng-model="mAddEditView.User.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/" />
</div>
<span ng-show="form.password1.$dirty && form.password1.$error.required" class="help-block">Password is required</span>
<span ng-show="mAddEditView.User.Password !== mAddEditView.User.Password1" class="help-block"><font style="color:red;">Password is not valid!</font></span>
#* code for checking if password match *#
<span ng-show="form.password1.$valid && mAddEditView.User.Password === mAddEditView.User.Password1"><font style="color:white;">Password Matched</font></span>
<span id="divMayus" style="visibility:hidden">Caps Lock is on!</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" value="Login" ng-disabled="form.$invalid || vm.dataLoading || errors.mail.isExists || mAddEditView.User.Password !== mAddEditView.User.Password1">
Change Password
</button>
</div>

Answer 1

You can update your ng-show condition for message to
ng-show="form.password1.$valid && form.password1.$dirty && form.password.$dirty && mAddEditView.User.Password === mAddEditView.User.Password1"
So that it'll show only when user started editing both fields & user added valid password according to RegExp & then last condition to check if both are same.
*Required validation is necessary for making form invalid & avoiding user to submit it. So adding required attribute & for submit button form.$invalid will handle it itself

Answer 2

You should also check whether password1 is passing required validation or not.
ng-show="!form.password1.$error.required &&
form.password1.$valid &&
mAddEditView.User.Password === mAddEditView.User.Password1"