Angular 窗格拆分器，其中一个窗格出现表单验证错误

Question

我试图在 angular js 中拆分窗格，其中一个窗格具有带验证的表单。我已经用 name.In 控制器分配了表单，我正在使用表单 validation.But 的方法，它抛出错误作为 'Cannot read property '$invalid' of undefined'。这是我提供的示例 link。我怎样才能使窗格拆分器具有表单验证功能。

function canUpdate() {
          // Can't update if form fields are bad.
          if ($scope.myForm.$invalid) {
            return false;
          }

          return true;
        }

plunkr

Answer 1

作用域看不到其子作用域（更一般地说：后代作用域）的属性；在这种情况下，控制器设置在表单的 parent 元素中，因此表单的范围是控制器的子元素。这就是控制器中未定义 $scope.myForm 的原因。

解决方案是在表单元素处定义一个控制器：

<form name="myForm" class="form-horizontal" ng-controller="myOtherController">

在许多情况下，您甚至可以将封闭控制器的逻辑移动到内部控制器中。这是合理的，因为关于表单的逻辑应该放在表单附近而不是上面。更好的是，将功能封装在指令中。

如果逻辑必须保留在封闭的控制器中，那么它们必须以某种方式进行通信； Stack Overflow 中的许多问题都解决了控制器通信问题，如果您没有更具体的需求，可以使用共享服务。

Angular 窗格拆分器，其中一个窗格出现表单验证错误

Angular pane splitter where one of the pane having form throwing form validation error

javascript

forms

validation

jquery

angularjs