form validation and submition in angularjs

Question

I have html file:

<form role="form"  ng-submit="resetPasswordRequest();" name="resetPasswordForm" novalidate>


    <div  ng-show="!sessionExpired">

          <input type="password" ng-model="password" ng-focus  placeholder="New Password" name ="password" autofocus   ng-minlength="5" ng-maxlength="20"  required />
              <span  ng-show="resetPasswordForm.password.$error.required && submitted">New Password Required</span><br>
              <span  ng-show="resetPasswordForm.password.$error.minlength">New Password should contain at least 5 characters </span><br>
              <span  ng-show="resetPasswordForm.password.$error.maxlength">New Password  maximum length up to 20  characters only </span><br>


          <input type="password" ng-model="resetPassword" ng-focus  placeholder="Retype Password" name ="resetPassword" id ="resetPassword" autofocus  required/>
              <span  ng-show="resetPasswordForm.resetPassword.$error.required && submitted">Retype Password Required</span><br>
              <span ng-show="!resetPasswordForm.resetPassword.$error.required && resetPassword != password && submitted">Password not matching</span><br>

        <br><button type="submit" class="login-btn" ng-click="submitted=true">SUBMIT</button><br>
    </div>
    <div  ng-show="sessionExpired">
        <p class="txt-bld error-message" >URL Expired</p>
    </div>
</form>

and I have controller :

$scope.resetPasswordRequest = function(){
//valid form submission  only process the logic
if($scope.resetPasswordForm.$valid){ //some logic }
}

with the above form i can validate the form password field minlength,maxlenth,empty ,but the problem with password and retype password data matching case . <span ng-show="!resetPasswordForm.resetPassword.$error.required && resetPassword != password && submitted">Password not matching</span>

Even through the data of password and retype password is not matching the form is submitted and calling the controller function and processing the controller logic. But it is working if any validation is missing in the form then retype and password data matching case is working ,if no validation (min,max length ,empty )is not occur (every thing in the form in Positive case )the password and retype password data matching is not working .

How could i validate the form password and retype password data matching like min length,max length properties with out external directive.

Thank you for your suggestion ,I want to validate the password and retype password with out directive. — user3812457, Aug 22 '14 at 05:54
Doing it with a directive is the correct way. Any other way is prone to issues. — Sergiu Paraschiv, Aug 22 '14 at 06:02

score 0 · Answer 1 · answered Aug 20 '14 at 13:05

You can create a simple directive to check if the passwords are matching. From the result returned by the directive, you can set the validity of the second password field.

Sample HTML

<input type="password" id="password1" name="password1" ng-model="password1" required/>
<input type="password" id="password2" name="password2" ng-model="password2" required check-passwords="password1" />

Sample JS

ngAppModule.directive('checkPasswords', [function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attributes, ctrl) {

            // get the value of the attribute. In this case, it will be "password1"
            var firstPwd = '#' + attributes.checkPasswords;
            element.add(firstPwd).on('keyup', function () {
                scope.$apply(function () {
                    var isValid = element.val() === $(firstPwd).val();
                    // use "pwdsMatch" in "ng-show" along with the other validations
                    ctrl.$setValidity('pwdsMatch', isValid);
                });
            });
        }
    };
}]);

Thank you for your suggestion ,I want to validate the password and retype password with out directive,any have it is useful for me with directive. — user3812457, Aug 22 '14 at 05:56

form validation and submition in angularjs

1 Answers1