如何从父范围检查包含ng的表单的有效性？

一尘不染

如何从父范围检查包含ng的表单的有效性？

angularjs

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

由于子窗体的html在两个视图中都是100％相同的，因此我将其分成了一部分，并正在使用ng- include它进行呈现。在仅显示带有“后退/继续”按钮的子表单的视图中，我在父级HTML内渲染“后退/继续”按钮。

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

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

JSFiddle示例

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

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

阅读 188

2020-07-04

共1个答案

一尘不染

如果它是子表单，则可以将表单标签从子表单移到主表单中：更新后的JSFiddle

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

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

结果是imo有点混乱。我宁愿使用新范围创建一个’myForm’指令，以避免使用$ parent-类似于：

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

-请参阅此JSFiddle示例

2020-07-04