如何将一个写一个角指令为“必选”的情况？ [英] How would one write an Angular directive for a 'Required If' scenario?
问题描述
我工作的理解如何使用角指令来实现前端验证。虽然我熟悉的方式，指令一般工作，我有一个很难找到的任何教程，博文，甚至是实际的角度文档是什么，是如何切实地实施一个有用的验证。 （到那个，我的意思是一个已不存在，如在的如何实施验证这一基本属性教程。
I'm working on understanding how to use Angular Directives to implement front-end validations. While I'm familiar with the way that directives generally work, what I'm having a hard time finding in any tutorial, blogpost, or even the actual Angular docs, is how to meaningfully implement a useful validation. (By that, I mean one that isn't already there, as in this basic tutorial for how to implement a validation attribute.
最常见的以我的经验，是一个必选的场景。如果我有文本字段和文本字段B在我的形式，文本字段中有一个值，我的业务规则告诉我，文本字段B必须有一个值。然而，对于验证指令的各种教程都只有依靠他们是绑在元素上。
The most common of these in my experience, is a 'Required If' scenario. If I have Text Field A and Text Field B in my form, and Text Field A has a value, my business rules tell me that Text Field B must have a value. However, the various tutorials for validation directives have all only relied on the element that they are tied to.
问：我怀疑，我接近了如何实现像一个必选如果验证完全错误的问题。在角方式，什么是需要在表单中值的正确方法当且仅当它是依赖于某个字段的值？
Question: I suspect that I am approaching the problem of how to implement something like a Required If validation completely wrong. In the Angular way, what is the correct way to require a value in a form if and only if a field that it's dependent on has a value?
推荐答案
我今天做了一些额外的实验。的同事，促使我用不同的情况，即最后导致我解决问题为自己。
I did some additional experimentation today. A coworker prompted me with a different situation, that finally led to me solving the problem for myself.
我根本看问题的错误的方式，对于初学者 - 确切地说，我是在jQuery的方式看着它，希望通过该指令以某种方式暴露的方式来读取各个表单元素。这不一定是正确的，因为我们有一个范围，我们可以评估。
I was fundamentally looking at the problem in the wrong way, for starters - specifically, I was looking at it in the jQuery way, by expecting the directive to somehow expose ways to read individual form elements. This isn't necessarily correct, since we have a scope that we can evaluate.
下面是pre-1.3角指令code：
Here is the pre-1.3 Angular directive code:
var app = angular.module('app', []);
app.controller('someController', [
'$scope',
function($scope) {
$scope.valueA = '';
$scope.valueB = 'Chicken';
}
]);
app.directive('requiredIf', [
function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attr, model) {
// Read the companion attribute 'otherModelName'
var otherModelName = attr.otherModelName;
scope.$watch(attr.ngModel, function (value) {
var isValid = checkAgainstDependentModel(value);
model.$setValidity('requiredIf', isValid);
});
function checkAgainstDependentModel(value) {
// Assumes that the scope exposes a property with the passed-in
// model name as its name
var field = scope[otherModelName];
var isValid = true;
if(field != null || field != '')
if(value == null || value == '')
isValid = false;
return isValid;
}
}
};
}
]);
...在我们的标记会使用它像这样：
...In markup we would use it like so:
<form name='someForm'>
<input type='text' name='mainField' ng-model='valueA' />
<input type='text' name='subordinateField' ng-model='valueB' required-if other-model-name='valueA' />
<span style='color=red' ng-if='someForm.subordinateField.$error.requiredIf'>
(Required!)
</span>
</form>
<击>这种模式可扩展到各种其它定制验证，$ P $对 - 1.3。我的研究已经表明我，角1.3将删除 $解析器和 $格式化赞成 $验证和 $ asyncValidators 。
编辑：除了使用 $格式化/ $解析器，一个更好的主意，我跑过的，而不是做一个范围$看在相关的 ngModel 。由于这是一个pre-1.3的实现，我们仍然可以只做模型$ setValidity（东西，的isValid）; 这是基于对答案<一个href=\"http://stackoverflow.com/questions/12864887/angularjs-integrating-with-server-side-validation\">to如何最好地实现远程验证pre-1.3 的问题。
Instead of using $formatters/$parsers, a better idea I ran across is to instead do a scope.$watch on the associated ngModel. Since this is a pre-1.3 implementation, we can still just do model.$setValidity('thing', isValid); This is based on the answer to the question of how best to achieve remote validation pre-1.3.
这篇关于如何将一个写一个角指令为“必选”的情况？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
