Question

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

由于子窗体的html在两个视图中都是100％相同，因此我将其分为部分，并使用ng-include进行渲染。在仅使用后退/继续按钮显示子窗体的视图中，我在父HTML的HTML中呈现后退/继续按钮。

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

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

JSFiddle Example

请注意，在我的示例中，红色边框内的提交按钮被禁用，直到框中输入了某些内容并且“表格无效？”值更新，而蓝色边框内的按钮始终启用和“表格无效？”价值是空白的。

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

Answer 1

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

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

<form name="myFormHolder.myForm">

并在父控制器中

$scope.myFormHolder = {};

然后以下内容应该有效：

$scope.myFormHolder.myForm.$pristine

这种方式在评估表单时，myForm。$ valid将在父表上设置。我相信我问了同样的问题：Why form undefined inside ng-include when checking $pristine or $setDirty()?

Answer 2

如果它是子表单，您只需将表单标记从子表单移动到主表单中即可：updated JSFiddle

您还可以使用ngForm-directive

来嵌套表单

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

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

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

- 请参阅此JSFiddle example

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

2 个答案: