如何从父作用域检查包含ng的表单的有效性？

Question

我有一个在我的应用程序中的多个视图共享的子窗体.在一个视图中,此子窗体单独显示,底部有一个后退/继续按钮,引导用户进入下一个子窗体.在另一个视图中,子窗体显示在与其他子窗体相同的页面上(基本上是一个长格式).

由于子窗体的html在两个视图中都是100%相同,因此我将其分成部分并ng-include用于渲染它.在仅显示带有后退/继续按钮的子窗体的视图中,我在父HTML的内部渲染后退/继续按钮.

在视觉上,一切正常,我能够访问在表单(user.email, user.password, user.etc...)中输入的所有数据.

问题是我根据用户是否正确填写了表单来启用/禁用"继续"按钮,这在"仅子表单"变体中不起作用,因为父作用域似乎没有能够访问表单的状态.如果我将按钮粘贴在局部,它可以工作,但我不想这样做,因为按钮不属于每个使用此部分的实例.

JSFiddle示例

在我的示例中请注意,红色边框内的提交按钮被禁用,直到在框中键入内容并且"表单无效？" 值更新,而蓝色边框内的按钮始终启用和"表格无效？" 价值是空白的.

如何myForm.$invalid从父作用域访问值？

Answer 1

使用ng-include时创建的子范围是从父级隐藏表单函数.

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

<form name="myFormHolder.myForm">

并在父控制器中

$scope.myFormHolder = {};

然后以下应该工作:

$scope.myFormHolder.myForm.$pristine

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

Answer 2

如果它是一个子表单,你可以将表单标签从子表单移动到主表单中:更新的JSFiddle

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

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

结果是有点凌乱的imo.我宁愿创建一个带有新范围的'myForm'指令以避免使用$ parent - 例如:

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

- 看到这个JSFiddle示例