Question

什么是“Angular”推荐的方法来验证涉及表单上多个字段的条件？我见过的大多数或所有验证示例都讨论了附加到单个文本框，选择等的自定义验证指令。那些涉及表单上多个字段的条件怎么样？

例如，我想要一个“空”表单验证器：这将阻止在没有必填字段且所有字段都为空的表单上提交。

另一个例子是，我在页面上有一个主/子一对多关系，子关系是一个子记录表。如果我需要验证至少有一个子记录应该存在，如果2或3个字段满足某些条件，该怎么办？

我想到的是构建附加到＆lt; form＆gt;的验证指令。标签作为元素。像<form name="xxx" validate-not-empty >这样的东西然后这个指令将在提交时设置表单的$ invalid属性。但是我担心这可能不是有角度的，因为我没有在我见过的任何代码示例中看到这个。所以我正在寻找任何替代方案来实现这一目标。

Answer 1

让你的＆＃34; not-empty＆＃34;有什么问题？指令放在你的每个输入字段？（遵循这种做法：http://angularjs.io/how-to-create-a-custom-input-validator-with-angularjs/）

然后您可以检查表单是否有效，例如禁用发送按钮：

static List<? extends Fruit> fruit = new ArrayList<Fruit>();

要使其正常工作，您必须拥有其ng-model的所有输入。

我没有安静地了解你的主人/孩子的问题。你可以举个例子......

Answer 2

我已经根据输入类型（电子邮件，电话等）和“必需”属性使用了基本验证。但是，更复杂的验证通常通过自定义指令来处理。虽然，很可能有一个我不知道的库提供了一个共同的集合。

作为一个基本的例子：

<form name="contactForm">
    <input type="text" name="ContactName" ng-model="contact.name" required>
    <button type="button" ng-click="submitForm(contactForm)" />
</form>

然后，在你的控制器中：

$scope.submitForm = function (form) {
    if (form.$valid) {
        ...
    }
}

这个W3Schools页面很好地描述了Angular的验证。

AngularJS Form Validation

在文章的最后，他们提到自定义验证需要更多的努力。但是，他们提供了一些例子。

创建自己的验证功能有点棘手。你有向您的应用程序添加新指令，并处理在具有某些指定参数的函数内验证。

<form name="myForm">
    <input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
    var app = angular.module('myApp', []);
    app.directive('myDirective', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attr, mCtrl) {
          function myValidation(value) {
            if (value.indexOf("e") > -1) {
              mCtrl.$setValidity('charE', true);
            } else {
              mCtrl.$setValidity('charE', false);
            }
            return value;
          }
          mCtrl.$parsers.push(myValidation);
        }
      };
    });
</script>

希望这有帮助。

Angular Form Wide验证（不是特定于字段的）

2 个答案: