How to display error message when passwords doesn't match in Angularjs?

Question

I'm new at Angularjs and my question is how to display an error message when the password doesn't match with confirm password? Can someone help me, this is not very difficult but I'm still learning to programme. Thanks to everyone! I have html code:

<form ng-submit="saveItem(userForm.$valid)" name="userForm">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="database_address">User</label>
                <input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="text" class="form-control" id="password" ng-model="activeItem.passwordString"  />
            </div>
            <div class="form-group">
                <label for="password">Confirm Password</label>
                <input type="text" class="form-control" id="password" ng-model="activeItem.passwordConfirm"  />
            </div>
              <p ng-show="(userForm.passwordConfirm != '') && (userForm.password != userForm.passwordConfirm)">Passwords don't match</p>

        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="username">Operator</label>
                <input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
            </div>
        </div>
    </div>
    <button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
    <!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>

And angular function:

$scope.saveItem = function(){
        console.log($scope.activeItem);
        //delete $scope.activeItem.hash_method
        var objectToSave = {
            username: $scope.activeItem.username,
            //password: $scope.activeItem.password,
            name: $scope.activeItem.name,
            id: $scope.activeItem.id
        };

        if($scope.activeItem.passwordString != ''){
            if($scope.activeItem.passwordString == $scope.activeItem.passwordConfirm){
                objectToSave.password = $scope.activeItem.passwordString;
            } else {
                    console.log('Confirm password error');

            }
        }

See Can anyone explain me this password match directive?.

georgeawg
– georgeawg

2019-03-15 11:25:06 +00:00
Commented Mar 15, 2019 at 11:25 — georgeawg
– georgeawg, Commented Mar 15, 2019 at 11:25

Dortimer · Accepted Answer · 2019-03-15 14:46:46Z

You'll want to keep different Id's for the two password fields, also take a look at your model bindings:

<input type="text" class="form-control" id="password" ng-model="activeItem.passwordString" />

<input type="text" class="form-control" id="passwordConfirm" ng-model="activeItem.passwordConfirm" />

You can just reference the items that are bound with ng-model within an ng-if/ng-show, and then you shouldn't need any custom logic on the back-end.

<p ng-show="(activeItem.passwordString && activeItem.passwordConfirm) && activeItem.passwordString !== activeItem.passwordConfirm ">Passwords don't match</p>

Also, you'll probably want to use '!==' over '!=' since you're just comparing two strings, as it's more strict of a comparison.

Edit: one thing to note, with this direction you'll still probably want to do error checking in the save function, but this should handle displaying the error message without any issues.

dawsnap · Accepted Answer · 2019-03-15 13:45:45Z

0

Remember the operator for 'not equal' is "!==", with that you will be able to make it!

answered Mar 15, 2019 at 13:45

dawsnap

1,0561 gold badge11 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to display error message when passwords doesn't match in Angularjs?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related