28

我有一个在我的应用程序中的多个视图之间共享的子表单。在一个视图中，此子表单单独显示，底部有一个后退/继续按钮，可将用户引导至下一个子表单。在另一个视图中，子表单与其他子表单（基本上是一个长表单）显示在同一页面上。

由于子表单的 html 在两个视图中都是 100% 相同的，因此我将它分成一个部分并ng-include用于渲染它。在仅显示带有后退/继续按钮的子表单的视图中，我在父 HTML 中呈现后退/继续按钮。

从视觉上看，一切正常，我可以访问在表单 ( user.email, user.password, user.etc...) 中输入的所有数据。

问题是我根据用户是否正确完成表单来启用/禁用“继续”按钮，这在“仅子表单”变体中不起作用，因为父范围似乎没有能够访问表单的状态。如果我将按钮粘贴在部分中，它可以工作，但我不想这样做，因为在使用此部分的每个实例中按钮都不属于那里。

JSFiddle 示例

请注意，在我的示例中，红色边框内的提交按钮被禁用，直到在框中键入内容并且“表单无效？” 值更新，而蓝色边框内的按钮始终处于启用状态并且“表单无效？” 值为空白。

如何myForm.$invalid从父范围访问值？

4

2 回答 2

25

使用 ng-include 时创建的子作用域对父作用隐藏了表单函数。

除了使用指令之外，您还可以在父级中添加一个对象，但是将表单的名称设置为具有如下属性的对象很重要：

<form name="myFormHolder.myForm">

并在父控制器中

$scope.myFormHolder = {};

那么以下应该工作：

$scope.myFormHolder.myForm.$pristine

这样，在评估表单时， myForm.$valid 将在父级上设置。我相信我问过同样的问题：为什么在检查 $pristine 或 $setDirty() 时在 ng-include 中形成 undefined？

于 2014-05-16T17:32:43.337 回答
15

如果它是子表单，您只需将表单标签从子表单移动到主表单：更新的 JSFiddle

您还可以使用ngForm-directive嵌套表单：

在角度形式可以嵌套。这意味着当所有子表单都有效时，外部表单也有效。但是浏览器不允许嵌套元素，因此 Angular 提供了 ngForm 别名，它的行为与表单嵌套相同，但允许表单嵌套。

结果有点混乱。我宁愿创建一个具有新范围的“myForm”指令以避免使用 $parent - 例如：

myApp.directive('myForm',function(){
    return{ 
        restrict:'E',
        scope:{model:'='},
        templateUrl:'/form.html',
        replace:true
    }
});

- 看这个JSFiddle 例子

于 2013-04-09T09:16:56.457 回答