javascript - AngularJS : validate before continuing

Question

我尝试实现的工作流程有问题。

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

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

我有一个“保存”按钮，它应该在我的所有 UniqueFunctionName 指令中触发验证，因此我在单击按钮时分派(dispatch)一个事件，如下所示:

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 Forms Guide ，你应该包围你的<input />具有带有 name 属性的表单的元素。例如:

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

现在，在 Controller 的 $scope 内，您可以访问 FormController实例使用 $scope.myForm ，它有许多有用的属性。例如， $valid property .

您可以在 Controller 中使用它，如下所示:

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

See this similar question.

您还可以使用 $scope.myForm.userName.$valid 访问单个输入的验证状态(假设您也为这些输入提供了名称属性) .

最重要的是，它在每次模型更新后运行，因此无需调度自定义事件。 Angular 将运行验证代码并为您设置变量，这会消除您尝试让异步代码同步运行的问题。

自定义验证

如果除了 Angular 提供的验证(电子邮件、号码、网址等)之外，您不需要对输入进行任何特殊验证，只需添加 appropriate attributes Angular 会做正确的事情，使结果在 FormController 的 $valid 和 $error 属性上可用。

有一个非常简单的方法来制作 custom validators (有关简单示例，请参阅整数示例)。我实际上还没有编写过比这更复杂的验证器，因此我将在 Angular 文档和其他 Stackoverflow 答案中解释更多内容。