In below code snippet for password validation working fine initially. But
after adding ng-pattern in user password and confirm password section. But
after this validation its showing password mismatch. But if i remove
ng-pattern its working fine. How can i resolve this issue. validation is
added for upper case lower case and special characters..
<div class="column medium-6">
<!-- Password -->
<div class="field-group-container">
<label for="password">User password</label>
<p class="label__helper-text">Password must between <span
class="nowrap">{{modalCtrl.minPasswordLength}} –
{{modalCtrl.maxPasswordLength}}</span> characters</p>
<input id="password"
name="password"
type="password"
ng-minlength="modalCtrl.minPasswordLength"
ng-maxlength="modalCtrl.maxPasswordLength"
ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!@#\$%\^&\*])(?=.{8,})$/"
autocomplete="new-password"
ng-required="modalCtrl.user.new ||
form.password.$touched || form.passwordConfirm.$touched"
ng-model="modalCtrl.user.password"
password-visibility-toggle
ng-click="form.password.$setTouched()"
placeholder="{{
(modalCtrl.user.new ||
form.password.$touched ||
form.passwordConfirm.$touched) ? '' : '******'}}"/>
<div ng-if="form.password.$invalid && form.password.$dirty"
class="form__validation-message">
<span ng-show="form.password.$error.required">
Field is required</span>
<span ng-show="form.password.$error.minlength ||
form.password.$error.maxlength">
Length must be between <span
class="nowrap">{{modalCtrl.minPasswordLength}} –
{{modalCtrl.maxPasswordLength}}</span> characters</span>
</div>
</div>
<!-- Password confirm -->
<div class="field-group-container">
<label for="passwordConfirm">Confirm user password</label>
<input id="passwordConfirm"
name="passwordConfirm"
type="password"
ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!@#\$%\^&\*])(?=.{8,})$/"
autocomplete="new-password"
ng-required="modalCtrl.user.new ||
form.password.$touched || form.passwordConfirm.$touched"
ng-model="modalCtrl.user.passwordConfirm"
password-visibility-toggle
password-confirm
first-password="form.password.$modelValue"
ng-click="form.passwordConfirm.$setTouched()"
placeholder="{{(
modalCtrl.user.new ||
form.password.$touched ||
form.passwordConfirm.$touched) ? '' : '******'}}"/>
<div ng-if="form.passwordConfirm.$invalid &&
form.passwordConfirm.$dirty" class="form__validation-message">
<span ng-show="form.passwordConfirm.$error.required">
Field is required</span>
<span ng-show="form.passwordConfirm.$error.passwordConfirm"
ng-hide="form.passwordConfirm.$error.required">
Passwords do not match</span>
<span ng-show="form.passwordConfirm.$error.minlength ||
form.passwordConfirm.$error.maxlength">
Length must be between <span class="nowrap">1 – 16</span>
characters</span>
</div>
</div>
</div>
</div>
</div>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/8b3d2df9-cce6-4bc4-b633-8fbff37a2fd9n%40googlegroups.com.
