Angular.js - 表单验证会发出任何事件吗?

时间:2013-07-15 11:22:21

标签: javascript validation angularjs angularjs-scope angular-ui

问题是,我使用的是ui-router,我有两个视图,一个是工具栏,第二个是表单内容。

现在我想在工具栏中有一个保存按钮,如果表单不是$valid,则会禁用该按钮。但是这两者的范围完全不同,就像:

  • rootScope
    • 工具栏范围
    • 内容范围(form.$valid

所以我以为我会通过听取表单发出的某些$有效事件来处理它。

根据Vojta所说here这些事件应该存在,但是我无法在任何地方找到它们......并且看this我没有看到任何事件..

我可能会这样做

$scope.$watch('form.$valid', function(newVal, oldVal) {
   $scope.$emit('validityChange', {'form':newVal});
});

但感觉就像使用事件而不是这样会更好

或者我应该尝试一些完全不同的东西?请注意,我不能将工具栏的ui-view放在内容的ui-view中...并且符合this,两个ui-views根本不能具有相同的范围。

2 个答案:

答案 0 :(得分:0)

直接回答这个问题: 我不知道angularjs中的原生表单事件。但是,如您所知,您可以轻松创建自己的事件,这将解决您的问题。

但这是我的建议: 您正在尝试使两个控制器相互通信。使用事件可能是错误的方法。事件应该真正用于应用程序范围的通知,例如身份验证。

您可以重构表单并将按钮提交到共享同一个控制器的两个指令中。虽然他们不会共享范围,但他们将共享一个可用于通信的控制器对象。我会这样做。

另一种方法是将两个范围嵌套在一起。将表单代码移动到更高级别的控制器。像这样:

  • rootScope
    • 主要//您的表单代码在这里
      • 工具栏//提交按钮可以访问功能
      • 内容//表单可以访问功能

希望有所帮助!

答案 1 :(得分:0)

假设您的两个视图必须具有不同的状态,并且两者都在同一主控制器和主HTML页面中,您可以使用其状态名称和ng-if来指定您的条件。

让我们说“内容”状态适用于您的内容视图。

现在,在包含工具栏的HTML div标签中,在保存按钮字段中提及一些条件,类似于此

Solaris : 0000000000000000a12
RHEL    :                 a12 (left padding with spaces)

如果满足此条件,则间接表示您的表单有效。

但是,您必须在run方法中编写此方法,该方法应在与模块声明相同的js文件中声明。

ng-if = $state.current.name === 'content' && 'nameOfYourForm'.$valid 

然后在你的run方法中,注入$ rootScope和$ state,并声明并定义如下:

angular.module('nameOfModule' , ['dependency1', ..]). run(run)