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');

            }
        }

Answer 1

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.