Wednesday, 15 September 2010

AngularJS ui-utils password validation -


I have a problem with angular ui-utils, especially UI-validate I have a user with password change form I am trying to provide and match is required to "new password" and "confirm new password", here:

  & lt; Table class = "table" & gt; & Lt; Form & gt; {{Password password.New password 2. $ error.validator}} & lt; Tr & gt; & Lt; Th & gt; Current password: & lt; / Th & gt; & Lt; Td> & Lt; Input type = "text" name = "current password" ng-model = "passwordform content password" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; New Password: & lt; / Th & gt; & Lt; Td> & Lt; Input type = "password" name = "new password" ng-model = "passwordForm.newPassword" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Confirm new password: & lt; / Th & gt; & Lt; Td> Input  Save     & gt;  

and in my controller I have

  $ scope.passwordForm = {current password: "", new password: " "New Password 2:" "};  

The problem is, it does not matter if the newpassword and newPassword2 match, save The button button is enabled and evaluates for {{!! passwordForm.newPassword2.error.validator}} incorrect

I have previously Many have gone through Stackoverflow threads and other sources, but I can not understand what any help is wrong in my code.

  angular module ("plunker", [ 'Ui.utils']);  

Then there are some problems with HTML that you have posted, firstly, do not have your form inside a table. Stade and it is not valid, so I moved it out of the table and I create a name

  & lt; Form name = "myForm" & gt; & Lt; Table class = "table" & gt; {{!! !! MyForm.newPassword2. $ Error.validator}} & lt; Tr & gt; & Lt; Th & gt; Current password: & lt; / Th & gt; & Lt; TD & gt; & Lt; Input type = "text" name = "currentPassword" ng-model = "passwordfirm content password" & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; New Password: & lt; / Th & gt; & Lt; TD & gt; & Lt; Input type = "password" name = "newpassword" ng-required = "true" ng-model = "passwordfirm.newpassword" & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Confirm new password: & lt; / Th & gt; & Lt; TD & gt; & Lt; Input type = "password" name = "newPassword2" ng-required = "true" ng-model = "passwordForm.newPassword2" ui-valid = "'$ value == passwordForm.NewPassword'" ui-validate-watch = " 'Password Form.New Password' "& gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; / TD & gt; & Lt; TD & gt; & Lt; Button type = "button" ng-click = "send change password ()" ng-disabled = "myForm.newPassword2.over $ Error.validator" class = "btn btn-primary" & gt; Save & lt; / Button & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Form & gt;  

I have also added ng-required for two new password fields because the empty form will not be allowed to allow the password and in the end your button will be the name of the actual form instead of the ng-disabled feature To find your object validator.

It should fix this, I have a working example


No comments:

Post a Comment