How can I validate a input depending another input angularJS?

Question

I have a problem validating my form. It is a form to change the password of a register user, the profile picture, and the biography of him. In that form the password is not required firstly, but when someone write the old password, the form requires the new password and the confirm password. I show it by an example.

Right now is not required, but if I write something in the input of old password I need that the new password and the confirm password become red. The code I have is it:

<div class="form-group">
            <label for="oldpassword" class="cols-sm-2 control-label">Old Password</label>
            <div class="cols-sm-10">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                    <input type="password" class="form-control" name="oldpassword" id="oldpassword"
                           placeholder="Enter your actual password" ng-model="oldPassword"/>
                </div>
            </div>
        </div>



        <div class="form-group">
            <label for="password" class="cols-sm-2 control-label">New Password</label>
            <div class="cols-sm-10">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                    <input type="password" class="form-control" name="password" id="password"
                           placeholder="Enter your new password"
                           ng-model="newPassword" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" require-pass/>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
            <div class="cols-sm-10">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
                    <input type="password" class="form-control" name="confirm" id="confirm"
                           placeholder="Confirm your new password" ng-model="confirm" require-pass confirm-directive
                           />
                </div>
            </div>
        </div>

The require-pass directive works but only when the user write something in the input of new password or confirm password. The confirm-directive is a directive to check if both password are equals (that directive works). The require-pass directive is:

app.directive('requirePass', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attr, mCtrl) {
        function myValidation(value) {
            var oldPass = $('#oldpassword').val();
            console.log(oldPass);
            if (oldPass!="") {
                mCtrl.$setValidity('charE', false);
            } else {
                mCtrl.$setValidity('charE', true);
            }
            return value;
        }

        mCtrl.$parsers.push(myValidation);
    }
}});

Thank you for the help!!

Answer 1

You don't need another custom directive for this. You can just use ng-required . Docs here: https://docs.angularjs.org/api/ng/directive/ngRequired

<input id="newPass" ng-required="oldPass" type="text" ng-model=... />
<input id="newPassConfirm" ng-required="oldPass" type="text" ng-model=... />

ng-required="oldPass" basically says "I require this field to be filled out if oldPass is not blank."