如何根據另一個輸入angularJS驗證輸入？

Question

我在驗證表格時遇到問題。 這是更改注冊用戶密碼，個人資料圖片和他的傳記的一種形式。 在那種形式中，首先不需要密碼，但是當有人寫舊密碼時，表單需要新密碼和確認密碼。 我通過一個例子展示。

現在不是必需的，但是如果我在舊密碼的輸入中寫了一些內容，則需要新密碼和確認密碼變為紅色。 我擁有的代碼是：

<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>

僅當用戶在新密碼輸入中輸入內容或確認密碼時，require-pass指令才有效。 確認指令是用於檢查兩個密碼是否相等的指令（該指令有效）。 require-pass指令為：

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

感謝您的幫助！！

Answer 1

您不需要其他自定義指令。 您可以只使用ng-required 。 此處的文檔： https : //docs.angularjs.org/api/ng/directive/ng必填

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

ng-required="oldPass"基本上說“如果oldPass不為空，我需要填寫此字段。”