角NG重复与NG-形式，访问在控制器的验证 [英] Angular ng-repeat with ng-form, accessing validation in controller

问题描述

我试图使用 NG-重复生成可编辑的列表。我想提醒用户更新在移动之前任何编辑，所以我使用 NG-形式以创建嵌套的形式在飞行中，因为文件说，我可以再使用验证这些动态创建的投入。

I am trying to generate an editable list using ng-repeat. I want to remind the user to update any edits before moving on, so I am using ng-form to create "nested" forms on the fly because the documentation says I can then use validation on these dynamically created inputs.

虽然这似乎是在HTML中工作，我不知道如何访问这些动态创建的表格及有关验证域控制器。具体来说，当用户改变输入我用的形式为$脏财产带来了一个按钮，告诉用户提交更改。到现在为止还挺好。然而，一旦改变被提交欲 $ setPristine（）的字段以指示该修改已经设置。有可能是确保变化在每个输入提交之前我允许的主要形式犯下的其他方式，但是这是我能拿出最好的。

While that seems to work within the HTML, I don't see how to access those dynamically created forms and related validation fields in the controller. Specifically, when the user changes the input I use the form $dirty property to bring up a button to tell the user to commit the changes. So far, so good. However, once the changes are committed I want to $setPristine() on the field to indicate that the changes have been set. There may be other ways of ensuring that changes are committed on each input before I allow the main form committed, but this was the best I could come up with.

不幸的是，尽管文档中说，如果我命名为NG-形式，它会传播到 $范围对象，我无法找到一个方法来访问它。 $ scope.dynamic_form 是不确定的。

Unfortunately, even though the documentation says that if I name the ng-form it will be propagated to the $scope object, I can't find a way to access it. $scope.dynamic_form is undefined.

下面是plunker展示我的意思：

Here is a plunker showing what I mean:

plnk

谢谢！

我想补充的问题，什么是工作，为这个具体的例子是添加到 NG-点击上动态创建的输入：

Just to add to the issue, what does work for this specific example is to add to the ng-click on the dynamically created input:

ng-click="namesForm.name.$setPristine();clean()"

但我仍然没有获得在控制器中动态创建的形式。我想，例如，观察者添加到 namesForm.name。$原始，这样我可以设置 MainForm中。$ setValidity（假）每当子的形式为 $脏来prevent从提交的主要形式，直到所有子表的修改已经提交的用户

But I still don't have access to the dynamically created form in the controller. I would like, for example, to add a watcher to the namesForm.name.$pristine so that I can set the mainForm.$setValidity(false) whenever the sub-form is $dirty to prevent the user from submitting the main form until all sub-form changes have been committed.

所以，简单地说，问题是如何在一个父控制器访问动态创建的嵌套ngForm的验证值？

So in a nutshell, the issue is how to access in a parent controller the validation values of a dynamically created nested ngForm?

推荐答案

更新2015年1月17日：

正如勒布朗梅内塞斯在评论中指出的角1.3 现在支持插值格式， ngForm 和输入指令。

As pointed out by Leblanc Meneses in the comments Angular 1.3 now supports interpolation with form, ngForm and input directives.

这意味着，使用前pressions命名您的元素：

This means that using expressions to name your elements:

<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
    <input type="text"
           name="input_{{$index}}_0"></input>
    <!-- ... -->
</div>  

将如预期：

$scope['namesForm_0']
$scope.namesForm_1

// Access nested form elements:
$scope.namesForm_1.input_1_0
...

---

原来的答复为角＆LT; = 1.2：

表单和工作的 ngFormController 可以迅速得到棘手pretty。

Working with forms and the ngFormController can get tricky pretty quickly.

您需要了解，你可以动态地添加表单元素和投入，但他们不能动态的命名 - 插值不会在 ngForm 或名称指令。

You need to be aware that you can dynamically add form elements and inputs but they can't be dynamically named - interpolation does not work in the ngForm or name directives.

例如，如果你试图动态命名的嵌套形式是这样的：

For example, if you tried to name your nested forms dynamically like this:

<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
    <!-- ... -->
</div>  

而不是使在这样的范围内的所有可用的嵌套形式：范围['namesForm_0'] 你只能访问单一的（最后一个）形式与文字名称范围['_ namesForm {{$指数}}'] 。

Instead of making all the nested forms available on the scope like this: scope['namesForm_0'] you would only have access to the single (last) form with the literal name scope['namesForm_{{$index}}'].

在你的情况，你需要创建一个将随 ngForm 添加自定义指令来处理设置 $质朴$ 和 $无效为形式的实例。

In your situation you need to create a custom directive that will be added along with ngFormto handle setting $pristine$ and $invalid for that form instance.

JavaScript的：

这个指令会眼睁睁地看着它的形式设置 $有效性来prevent的 $脏状态提交时弄脏和处理设置 $质朴状态的时候，'干净'按钮pressed。

This directive will watch the $dirty state of its form to set the $validity to prevent submission when dirty and handle setting the $pristine state when the 'clean' button is pressed.

app.directive('formCleaner', function(){
    return {
        scope: true,
        require: '^form',
        link: function(scope, element, attr){
            scope.clean = function () {
                scope.namesForm.$setPristine();
            };

            scope.$watch('namesForm.$dirty', function(isDirty){
                scope.namesForm.$setValidity('name', !isDirty);
            });
        }
    };
});

HTML：

然后到你的HTML，唯一的变化是添加 formCleaner 指令。

Then the only change to your HTML is to add the formCleaner directive.

所以，你原来的HTML从：

So change your original HTML from this:

<body ng-controller="MainCtrl">
    <form name="mainForm" submit="submit()">
        <h3>My Editable List</h3>
        <div ng-form="namesForm"
             ng-repeat="name in names">
            <!-- ... -->
        </div>
        <button class="btn btn-default" type="submit">Submit</button>
    </form>
</body>

此，通过添加形式吸尘器旁边的 NG-形式：

<body ng-controller="MainCtrl">
    <form name="mainForm" submit="submit()">
        <h3>My Editable List</h3>

        <!-- Add the `form-cleaner` directive to the element with `ng-form` -->
        <div form-cleaner
             ng-form="namesForm"
             ng-repeat="name in names">
            <!-- ... -->
        </div>
        <button class="btn btn-default" type="submit">Submit</button>
    </form>
</body>

下面是一个更新的Plunker呈现新的行为：<一href=\"http://plnkr.co/edit/Lxem5HJXe0UCvslqbJr3?p=$p$pview\">http://plnkr.co/edit/Lxem5HJXe0UCvslqbJr3?p=$p$pview

Here is an updated Plunker showing the new behaviour: http://plnkr.co/edit/Lxem5HJXe0UCvslqbJr3?p=preview

这篇关于角NG重复与NG-形式，访问在控制器的验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！