【发布时间】：2016-05-27 15:29:22
【问题描述】：
我遇到了问题。我正在尝试为我的表单创建一个验证指令。我的验证过程有点复杂。我有 4 个选择（下拉菜单）。第一个团队（用户和代理）有 2 个下拉菜单，第二个团队也有 2 个下拉菜单。
我的验证指令需要执行以下操作：
已选择用户一线队，但未选择副一线队（需要副一线队）
选择了副第一团队，但不是用户第一团队（需要用户第一团队）
- 选择了用户二队但不是副二队（需要副二队）
- 选择了副二队，但不是用户二队（需要用户二队）
- 没有为第一或第二团队选择用户或代理人（至少需要一个用户或代理人）
我的 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.');
}
};
}]);
【问题讨论】：
-
你可以添加你的控制器或者做一个 plunker 吗？
-
可能，您应该对每个 INPUT 和 SELECT 使用指令
requireUsers。 -
@dendimiiii 你到底需要什么控制器？
-
@StepanKasyanenko 如果这样做，我将无法读取其他用户或代表，因为每个 SELECT 元素的 ng-model 都不同。
-
自己动手做一个 :)
标签： javascript html angularjs validation select