角度 - 依赖字段验证

我遇到了一个问题。我正在尝试为我的表单创建验证指令。我的验证过程有点复杂。我有 4 个选择(下拉列表(。第一个团队(用户和副手(有 2 个下拉列表，第二个团队也有 2 个下拉列表。

我的验证指令需要执行以下操作：

1. 用户第一队已选，但不是副一队(需要副一队(

2. 已选择副一队，但不是用户第一队(需要用户第一队(

3. 用户二队已选，但未选副二队(需要副二队(
4. 已选择副二队，但不是用户二队(需要用户二队(
5. 没有选择第一或第二组的用户或副手(至少需要一名用户或副手(

我的 html 看起来像这样：

        <div class="row" ng-form="reportForm" ng-model="report" require-users>                
            <!-- User First Team -->
            <div class="col-sm-3 col-xs-6">
                <div class="form-group">
                    <label>User First Team</label>
                    <!-- Dropdown User First Team -->
                    <select ng-form="reportForm.userFirst" 
                            ng-model="report.userFirst" 
                            ng-options="user.Name for user in users track by user.Id" 
                            class="form-control">
                        <option></option>
                    </select>
                    <!-- Error Messages-->
                    <div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert">
                        <!-- Message required -->
                        <div ng-message="requireUserFirst">
                            <small>A User for the first team is required.</small>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Deputy First Team -->
            <div class="col-sm-3 col-xs-6">
                <div class="form-group">
                    <label>Deputy First Team</label>
                    <!-- Dropdown Deputy First Team -->
                    <select ng-form="reportForm.deputyFirst" 
                            ng-model="report.deputyFirst" 
                            ng-options="user.Name for user in users track by user.Id" 
                            class="form-control">
                        <option></option>
                    </select>
                     <!-- Error messages -->
                    <div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert">
                        <!-- Message required -->
                        <div ng-message="requireDeputyFirst">
                            <small>A Deputy for the first team is required.</small>
                        </div>
                    </div>
                </div>
            </div>
            <!-- User Second Team -->
            <div class="col-sm-3 col-xs-6">
                <div class="form-group">
                    <label>User Second Team</label>
                    <!-- Dropdown User Second Team -->
                    <select ng-form="reportForm.userSecond" 
                            ng-model="report.userSecond" 
                            ng-options="user.Name for user in users track by user.Id" 
                            class="form-control">
                        <option></option>
                    </select>
                     <!-- Error messages -->
                    <div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert">
                       <!-- Message required -->
                        <div ng-message="requireUserSecond">
                            <small>A User for the second team is required.</small>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Deputy Second Team -->
            <div class="col-sm-3 col-xs-6">
                <div class="form-group">
                    <label>Deputy Second Team</label>
                    <!-- Dropdown Deputy Second Team -->
                    <select ng-form="reportForm.deputySecond" 
                            ng-model="report.deputySecond" 
                            ng-options="user.Name for user in users track by user.Id" 
                            class="form-control">
                        <option></option>
                    </select>
                     <!-- Error messages -->
                    <div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert">
                        <!-- Message required -->
                        <div ng-message="requireDeputySecond">
                            <small>A Deputy for the second team is required.</small>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Error messages -->
            <div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert" class="col-xs-12">
                <!-- Message missing user and deputy -->
                <div ng-message="requireAll">
                    <small><strong>At least one user and deputy is needed.</strong></small>
                </div>
            </div>
  </div>

我的指示在这里：

app.directive('requireUsers', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ngModel) {
            scope.$watch(function () {
                return ngModel.$modelValue;
            }, function (model, oldModel) {
                if (model != oldModel) {
                    if (model.userFirst == null && model.deputyFirst == null && model.userSecond == null && model.deputySecond == null) {
                        ngModel.$setValidity('requireAll', false);
                    } else {
                        ngModel.$setValidity('requireAll', true);
                    }
                    if ((model.userFirst == undefined || model.userFirst == null) && model.deputyFirst != null) {
                        ngModel.$setValidity('requireUserFirst', false);
                    } else {
                        ngModel.$setValidity('requireUserFirst', true);
                    }
                    if ((model.deputyFirst == undefined || model.deputyFirst == null) && model.userFirst != null) {
                        ngModel.$setValidity('requireDeputyFirst', false);
                    } else {
                        ngModel.$setValidity('requireDeputyFirst', true);
                    }
                    if ((model.userSecond == undefined || model.userSecond == null) && model.deputySecond != null) {
                        ngModel.$setValidity('requireUserSecond', true);
                    } else {
                        ngModel.$setValidity('requireUserSecond', true);
                    }
                    if ((model.deputySecond == undefined || model.deputySecond == null) && model.userSecond != null) {
                        ngModel.$setValidity('requireDeputySecond', false);
                    } else {
                        ngModel.$setValidity('requireDeputySecond', true);
                    }
                }
            });
        }
    };
});

问题是观察程序仅在指令初始化时才起作用。因此，当我更改值时，验证过程将不会开始。

更新报告控制器：

angular.module('ReportTool')
    .controller('ReportController', ['$scope', 'Report', 'User', function ($scope, Report, User) {
        var _this = this;
        // Load all Teammembers (API Call in Service)
        User.query().then(function (success) {
            _this.users= success.data;
        }, function (error) {
            console.log('Users could not be loaded.');
        });            
        // Save report
        this.save = function () {
            if (_this.report != null) {
                // create report
                Report.post(_this.report).then(function (success) {
                    console.log('Report created.');
                }, function (error) {
                    console.log('Report could not be created.');
            } else {
                console.log('Report is null.');
            }
        };
    }]);