如何从父范围检查包含 ng 的表单的有效性? [英] How can I check an ng-included form's validity from the parent scope?

问题描述

我有一个在我的应用程序中的多个视图之间共享的子表单.在一个视图中，这个子表单单独显示，底部有一个后退/继续按钮，引导用户到下一个子表单.在另一种视图中，子表单与其他子表单(基本上是一个长表单)显示在同一页面上.

由于子表单的 html 在两个视图中 100% 相同，我将其分成部分并使用 ng-include 呈现它.在仅显示带有后退/继续按钮的子表单的视图中，我在父级的 HTML 中呈现后退/继续按钮.

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

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

JSFiddle 示例

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

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

解决方案

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

您还可以使用 ngForm-directive 嵌套表单::><块引用>

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

结果有点乱.我宁愿创建一个具有新范围的myForm"指令以避免使用 $parent - 类似于:

myApp.directive('myForm',function(){返回{限制:'E'，范围:{模型:'='}，templateUrl:'/form.html',替换:真}});

- 请参阅此 JSFiddle 示例

I have a subform that is shared among multiple views in my app. In one view, this subform is displayed alone with a back/continue button at the bottom that leads the user to the next subform. In another view, the subform is displayed on the same page as other subforms (basically one long form).

Since the html of the subform is 100% identical in both views, I separated it into a partial and am using ng-include to render it. In the view that displays only the subform with the back/continue buttons, I render the back/continue buttons within the parent's HTML.

Visually, everything works fine, and I'm able to access all of the data entered in the form (user.email, user.password, user.etc...).

The problem is that I'm enabling/disabling the "continue" button based on whether or not the user has completed the form correctly, and this does not work in the "subform-only" variation because the parent scope doesn't seem to be able to access the form's status. If I stick the buttons in the partial, it works, but I don't want to do that because the buttons don't belong there in every instance that this partial is being used.

JSFiddle Example

Notice in my example that the submit button within the red border is disabled until something is typed in the box and the "Form Invalid?" value updates, while the button within the blue border is always enabled and the "Form Invalid?" value is blank.

How can I access the value of myForm.$invalid from the parent scope?

解决方案

If it's a sub-form you can just move the form-tag from the sub-form and into the main-form: updated JSFiddle

You could also nest your forms using the ngForm-directive:

In angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However browsers do not allow nesting of elements, for this reason angular provides ngForm alias which behaves identical to but allows form nesting.

The result is a bit messy imo. I'd rather create a 'myForm'-directive with a new scope to avoid using $parent - something like:

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

- see this JSFiddle example

这篇关于如何从父范围检查包含 ng 的表单的有效性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！