AngularJS：在继续之前先进行验证

Question

我要实施的工作流程有问题。

在我的应用程序中，我有几个带有指令的文本框，如下所示：

<input type="text" data-unique-function-name
       data-is-valid="isValid"
       data-ng-model="function.Name" />

我有一个保存按钮，该按钮应该触发所有我的UniqueFunctionName指令中的验证，因此我在按钮单击时分派了一个事件，如下所示：

function TriggerValidation()
{
    scope.$broadcast('uniqueFunctionName::checkUniqueFunctions');
}

这是由我的指令处理的，如下所示：

 scope.$on('uniqueFunctionName::checkUniqueFunctions',
            function () {

                    functionService.validate(scope.ngModel).success(function (data) {
                            if (data != null) {
                             scope.isValid = false;
                            }
                });
  });

scope.isValid变量从我的应用程序传递给每个uniqueFunctionName指令。 如果以上任何验证失败，则isValid将更改为false 。

我现在要尝试的是在用户按下保存按钮时触发验证，并且仅在此之后scope.isValid仍然为true时才触发。 我已经尝试过了，但是显然不起作用。

TriggerValidation(); //dispatch the event
if (scope.isValid) {
  //continue
} else {
  //display error message
}

有没有办法做到这一点？

Answer 1

它是内置的！

Angular提供了您需要执行的所有操作，但如何操作尚不十分清楚。 首先，根据《 AngularJS表单指南》 ，您应该在<input />元素周围加上具有name属性的表单。 例如：

<form name="myForm">
  <input type="text" ng-model="formData.userName" name="userName" />
</form>

现在，在控制器的$ scope中，您可以使用$scope.myForm访问一个FormController实例，该实例具有许多有用的属性。 例如， $valid属性 。

您可以在控制器中简单地使用它：

if ($scope.myForm.$valid) {
  // do something with the comfort that all your fields are validated
}

看到这个类似的问题。

您还可以使用$scope.myForm.userName.$valid来访问单个输入的验证状态（假设您也为这些输入提供了name属性）。

最重要的是，此操作在每次更新模型后都会运行，因此无需调度自定义事件。 Angular将运行验证代码并为您设置变量，从而消除了使异步代码同步运行的麻烦。

自定义验证

如果除了Angular提供的内容（电子邮件，数字，URL等）之外，您不需要对输入进行任何特殊验证，只需添加适当的属性 ，Angular将做正确的事情，使结果可在FormController的$ valid上使用和$ error属性。

有一种非常简单的方法来制作自定义验证器 （请参见整数示例以获取琐碎的示例）。 我实际上没有编写比这更复杂的验证器，因此我将向Angular文档和其他Stackoverflow答案进行解释。