我怎样才能从父范围检查的NG-包括表单的有效性？ [英] How can I check an ng-included form's validity from the parent scope?

问题描述

我有一个在我的应用程序的多个视图之间共享一个子窗体。有一种观点认为，与一回单独显示该子窗体/在那个引导用户到下一个子窗体底部的继续按钮。另一种观点认为，子窗体显示在同一页面上的其他子窗体（基本上是长格式）上。

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).

由于子窗体的HTML是在两个视图100％相同，我分开它变成一个局部的，现在用 NG-包括渲染它。在与背面仅显示子窗体视图/继续按钮，使我回/继续父母的HTML中的按钮。

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.

在视觉上，一切工作正常，我能够访问所有在表单中输入的数据（ user.email，user.password的，user.etc ... ）。

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例

在我的例子中看到红色边框内的提交按钮是无效的表无效？值的更新，而蓝色的边框内的按钮始终处于启用状态窗体无效？值为空。

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.

我怎样才能从父范围内访问 myForm会。$无效的价值？

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

推荐答案

如果它是一个子表单你可以从子窗体移动窗体标签和进入主形式：的updated的jsfiddle

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

您还可以窝使用 ngForm-指令广告形式：

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

在角形式可以嵌套。这意味着，外形式是有效的，当所有的子形式是有效的，以及。但是浏览器不允许元素嵌套，为此角度提供ngForm别名其行为相同，但允许形式筑巢。

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.

结果是有点乱海事组织。我宁愿创建一个myForm'，指令一个新的范围，以避免使用$父 - 是这样的：

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
    }
});

- 看到这个的jsfiddle例如

这篇关于我怎样才能从父范围检查的NG-包括表单的有效性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！