Javascript 角度相关场验证
我有个问题。我正在尝试为我的表单创建一个验证指令。我的验证过程有点复杂。我有4个选择（下拉列表）。第一个团队（用户和代理）有2个下拉列表，第二个团队也有相同的下拉列表 我的验证指令需要执行以下操作：Javascript 角度相关场验证,javascript,html,angularjs,validation,select,Javascript,Html,Angularjs,Validation,Select,我有个问题。我正在尝试为我的表单创建一个验证指令。我的验证过程有点复杂。我有4个选择（下拉列表）。第一个团队（用户和代理）有2个下拉列表，第二个团队也有相同的下拉列表 我的验证指令需要执行以下操作： 已选择用户第一团队，但不是副第一团队（需要副第一团队） 已选择副一线队，但不是用户一线队（需要用户一线队） 已选择用户第二团队，但不是副第二团队（需要副第二团队） 已选择副第二团队，但不是用户第二团队（需要用户第二团队） 未选择第一个或第二个团队的用户或代理人（至少需要一名用户或代理人） 我的htm
<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>
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.');
}
};
}]);
在这种情况下，您需要为每个检查编写一个指令，如
requireUsersangular.module（'ExampleApp'，['use'，'ngMessages']））
.controller（'ExampleController'，函数（$scope）{
});
。错误{
颜色：栗色
}
用户优先：
代理主席（译文）：
用户秒：
代理主席（译文）：
至少需要一个用户和代理。
需要第一个团队的用户。
一队需要一名副手。
您可以简单地将变量传递到指令中。然后检查一下
活的例子
angular.module（'ExampleApp'，['ngMessages']））
.controller（'ExampleController'，函数（$scope）{
})
.directive（'requireUsers'，function（）{
返回{
限制：“A”，
要求：'表格'，
范围：{
userFirst:“=”，
deputyFirst:“=”，
userSecond:“=”，
deputySecond:“=”，
},
链接：功能（范围、要素、属性、ngModel）{
功能更改值（型号、旧型号）{
如果（！scope.userFirst&&！scope.deputyFirst&&！scope.userSecond&&！scope.deputySecond）{
ngModel.$setValidity（'requireal'，false）；
}否则{
ngModel.$setValidity（'requireal'，true）；
}
如果（！scope.userFirst&&scope.deputyFirst）{
ngModel.$setValidity（'requireUserFirst'，false）；
}否则{
ngModel.$setValidity（'requireUserFirst'，true）；
}
如果（！scope.deputyFirst&&scope.userFirst）{
ngModel.$setValidity（'requireDeputyFirst'，false）；
}否则{
ngModel.$setValidity（'requireDeputyFirst'，true）；
}
如果（！scope.userSecond&&scope.deputySecond）{
ngModel.$setValidity（'requireUserSecond'，false）；
}否则{
ngModel.$setValidity（'requireUserSecond'，true）；
}
如果（！scope.deputySecond&&scope.userSecond）{
ngModel.$setValidity（'requireDeputySecond'，false）；
}否则{
ngModel.$setValidity（'requireDeputySecond'，true）；
}
}
范围：$watch（'userFirst'，changeValue）；
范围：$watch（'deputyFirst'，changeValue）；
范围：$watch（'userSecond'，changeValue）；
范围$watch（'deputySecond'，changeValue）；
}
};
});;
。错误{
颜色：栗色
}
用户优先：
代理主席（译文）：
用户秒：
代理主席（译文）：
至少需要一个用户和代理。
需要第一个团队的用户。
一队需要一名副手。
需要第二个团队的用户。
第二队需要一名副手。
您是否也可以添加控制器或制作一个plunker？可能，您应该对每个输入使用指令requireUsers
。@dendimiiii您到底需要控制器做什么？@stepankasysanenko如果我这样做，我就无法读取其他用户或副手，因为ng模型在每个选择元素上都不同。要自己制作一个plunker:）没有办法只使用一个吗指令？就像我在require users指令上做的那样？对我来说，将指令放在一个元素中而不是每个select元素中会容易得多。你知道我的意思吗？我又添了一个答案。请检查。抱歉，如果我太挑剔了，但我认为这个解决方案不干净，因为你必须“连接”模型。我相信有更好的解决办法。也许你知道为什么我的观察者只被执行一次，即使我改变了模型？谢谢你的帮助和时间！你的观察者观察只是为了改变你形态的价值！在代码中返回ngModel.$modelValue
告诉watch表单的更改值。您的表单值与输入和选择中的ng model
不同。我是update jsfiddle。现在它没有“连接”模型。为什么它采用这种形式？我写了ng model=“report”它不应该将此作为指令中的ngModel吗？您在标记中使用指令要求用户。然后使用ngModel
。指令选择窗体，因为您在窗体中初始化了指令。您的ng model='report'
没有指令要求用户
。更多细节。
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.');
}
};
}]);