1

Hello I am trying to create a simple form with a password and confirm-password inputs.

I found out that 'ng-pattern' and 'ng-match' don't work so good together. Until the password tag is not populated with a value,and it doesn't until it matches the ng-pattern restriction, he is on the local scope empty and because of the 'ng-match' directive between password tag and and confirm-password tag I always see an error "error passwords dont much" even when the are the same.

Is there any way around this?

Thanks

  $scope.ok = function (){};
  $scope.password = '';
  $scope.confirmPassword = '';
  $scope.passwordRegex ='(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{6,})$'; 
<form name="form" class="form-horizontal" novalidate>
  <div class="form-group">
     <label> Password: </label>                      
     <input name="password" type="password" 
     placeholder="Password" required
     ng-model="password"
     ng-pattern="passwordRegex" />
  </div>
  <div ng-show="form.$submitted && form.password.$invalid">
    <div ng-show="form.password.$error.required">
       RequiredField</div>
    <div ng-show="form.password.$error.pattern">
         InvalidPassword</div>
  </div> 

  <div class="form-group">
    <label>ConfirmPassword:</label>
    <input name="confirmPassword" type="password"
           placeholder="ConfirmPassword" required
           ng-model="confirmPassword"
           ng-match="password" />                             
  </div>
  <div 
  ng-show="password != confirmPassword">
       <div ng-show="form.confirmPassword.$error.match">
            PasswordMismatch</div>
      </div>
  <div ng-show="form.$submitted &&
  form.confirmPassword.$invalid">
       <div ng-show="form.confirmPassword.$error.required">
       RequiredField</div>
  </div>
  
   <button type="submit" ng-click="!form.$invalid && 
   testCtrl.ok()">Ok</button>
  </form>
user24136
  • 135
  • 4
  • 13
  • how about using style={{passwd1==passwd2?'border:1px solid red':''}} – user93 Jun 04 '17 at 13:58
  • you could also show the error message using ng-if in a separate div if they are not equal and if they are not pristine. and use ng-pattern to check if password conforms to the pattern – user93 Jun 04 '17 at 13:59
  • I have try to see it in the most simple way. inside my HTML I have put my bind data inside {{password}} and{{confirmedPassword}} and I typed. when I enter to the password input, until I don't match the regex pattern I don't see it in my view. and the moment I type something in my confirm input I see it my view at the same time. – user24136 Jun 04 '17 at 17:34

1 Answers1

0

Do the following changes in your code:-

Change your 

<div ng-show="password != confirmPassword">
       <div ng-show="form.confirmPassword.$error.match">
            PasswordMismatch</div>
      </div>

to this:-

<span ng-if="confirmPassword !== password" 
      ng-show="form.confirmPassword.$dirty">
      Password Mismatch!  
</span>

And you'll need to add this in your confirm password div tag

<div ng-class="{'has-error' : userForm.confpwd.$invalid && 
                !userForm.confpwd.$pristine}" >
</div>

Remove the single quotes at the start and end of your regular expression and change it to:-

$scope.passwordRegex =/^(?!^[0-9]$)(?!^[a-zA-Z]$)^([a-zA-Z0-9]{6,})$/;

Doing so, should solve your problem.

TeJas
  • 68
  • 3
  • 7