Javascript 如何为'；如果为'，则为必填项；脚本

我正在努力理解如何使用Angular指令实现前端验证。虽然我熟悉指令的一般工作方式，但在任何教程、博客帖子甚至实际的Angular文档中，我都很难找到如何有意义地实现有用的验证。（我指的是一个还没有出现的，比如在

在我的经验中，最常见的是“必要条件”场景。如果我的表单中有文本字段a和文本字段B，并且文本字段a有一个值，我的业务规则告诉我文本字段B必须有一个值。但是，验证指令的各种教程都只依赖于它们所绑定的元素

---

问题：我怀疑我正在解决如何实现诸如Required If验证之类的问题。从角度看，当且仅当表单依赖的字段有值时，在表单中要求值的正确方法是什么？

您可以尝试使用ng If仅添加下一个表单元素如果前一个表单元素有效，则为y。除非第一个元素有效，否则第二个元素将不存在于DOM中。

我今天做了一些额外的实验。一位同事用不同的情况提示我，最终导致我自己解决了问题

首先，我从根本上看问题的方式是错误的——具体地说，我是以jQuery的方式看问题的，因为我希望指令以某种方式公开读取单个表单元素的方法。这不一定正确，因为我们有一个可以评估的范围

以下是1.3之前的角度指令代码：

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

…在标记中，我们将这样使用它：

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

（必需！）

此模式可以扩展到1.3之前的各种其他自定义验证。我的研究表明，Angular 1.3将删除

$parsers

和

$formatters

，而支持

$validators

和

$asyncValidators

编辑：与其使用

$formatters/$parsers

，我遇到的一个更好的主意是在相关的

ngModel

上执行

作用域。$watch

。由于这是1.3之前的实现，我们仍然可以只执行

模型。$setValidity（'thing'，isValid）；

这是基于答案的