M.Khan M.Khan - 18 days ago 9
AngularJS Question

Angular JS confirm password message is already displaying

I have two fields password and confirm password and an error message in tag i.e "password mismatch" but it should be displayed when password is typed incorrectly in confirm password field instead it is already being displaying when I opens the form.

HTML

<div class="form-group" ng-class="{ 'has-error': submitted && CreateClientAdminForm.password.$error.required || CreateClientAdminForm.password.$error.pattern }" >
<label class="col-md-4 control-label" for="password">Password*</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="Password" class="form-control input-md" ng-model="clientAdmin.User.UserPassword" ng-pattern="regex.Password" ng-maxlength="20" required autofocus>
<span ng-show="submitted && CreateClientAdminForm.password.$error.required" class="help-block">Password can not be empty</span>

<span ng-show="CreateClientAdminForm.password.$error.pattern && CreateClientAdminForm.password.$invalid " class="help-block">Please enter a valid password with at least 6 characters. </span>
</div>
</div>
<!-- Password input-->
<div class="form-group" ng-class="{ 'has-error': submitted && CreateClientAdminForm.confirmpassword.$error.required || CreateClientAdminForm.confirmpassword.$error.pattern }" >
<label class="col-md-4 control-label" for="confirmpassword">Confirm Password*</label>
<div class="col-md-4">
<input id="confirmpassword" name="confirmpassword" type="password" placeholder="Password" class="form-control input-md" ng-model="clientAdmin.User.UserconfirmPassword" ng-pattern="regex.Password" ng-maxlength="20" required autofocus>
<span ng-show="submitted && CreateClientAdminForm.confirmpassword.$error.required" class="help-block">Password can not be empty</span>
<span ng-show="clientAdmin.User.UserPassword !== clientAdmin.User.UserconfirmPassword" class="help-block"><p>Password mismatch</p></span>

<span ng-show="CreateClientAdminForm.confirmpassword.$error.pattern && CreateClientAdminForm.confirmpassword.$invalid " class="help-block">Please enter a valid password with at least 6 characters. </span>
</div>
</div>


Controller

globalWeAlertApp.controller("ClientAdminController", function($scope, ClientAdminService,UserCRUDService, toastr, $cookieStore, $window ) {

//Other functions

}

Answer
<span
ng-show="clientAdmin.User.UserPassword != clientAdmin.User.UserconfirmPassword
&& (clientAdmin.User.UserPassword != '' &&
lientAdmin.User.UserconfirmPassword != '' )" 
class="help-block">
<p>Password mismatch</p>
</span>
Comments