angularjs – ng形式的角度ng重复,访问控制器中的验证

前端之家收集整理的这篇文章主要介绍了angularjs – ng形式的角度ng重复,访问控制器中的验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用ng-repeat生成一个可编辑的列表。我想提醒用户在继续之前更新任何编辑,所以我使用ng-form快速创建“嵌套”表单,因为文档说我可以在这些动态创建的输入上使用验证。

虽然这似乎在HTML中工作,我看不到如何访问这些动态创建的表单和控制器中的相关验证字段。具体来说,当用户更改输入时,我使用$ dirty属性来启动一个按钮来告诉用户提交更改。到现在为止还挺好。但是,一旦更改提交,我想对字段的$ setPristine()表示已经设置更改。可能有其他方法确保在允许主表单承诺之前对每个输入执行更改,但是这是我可以想出的最好的。

不幸的是,即使文档说如果我命名ng-form它将传播到$ scope对象,我找不到一种方法来访问它。 $ scope.dynamic_form未定义。

这里是一个plunker显示我的意思:

plnk

谢谢!

[EDIT]只是为了添加到问题,什么是这个具体的例子的工作是添加到ng单击动态创建的输入:

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

但我仍然没有访问动态创建的形式在控制器。例如,我想向namesForm.name。$ pristine添加一个观察者,这样当子表单是$ dirty时,我可以设置mainForm。$ setValidity(false),以防止用户提交主表单,直到所有子表单更改都已提交。

简而言之,问题是如何在父控制器中访问动态创建的嵌套ngForm的验证值?

更新2015-01-17:

正如Leblanc Meneses在评论中指出的,Angular 1.3现在支持使用形式,ngForm和输入指令进行插值。

这意味着使用表达式来命名您的元素:

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

Angular< = 1.2的原始答案: 使用表单和ngFormController可能很快就会变得棘手。 您需要注意,您可以动态添加表单元素和输入,但不能动态命名 – 插值在ngForm或名称伪指令中不起作用。 例如,如果您试图按如下方式动态命名嵌套表单:

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

而不是使所有的嵌套表单可用在范围上像这样:scope [‘namesForm_0’],你将只能访问具有文字名称范围[‘namesForm _ {{$ index}}’]的单个(最后)表单。

在您的情况下,您需要创建一个自定义指令,将与ngFormto处理设置$ pristine $和$无效的表单实例一起添加

JavaScript:

该指令将观察其形式的$ dirty状态,以设置$ validity以防止脏时提交,并且当按下“干净”按钮时处理设置$ pristine状态。

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指令。

所以改变你的原始HTML从这里:

<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-form旁边添加form-cleaner:

<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显示新的行为:http://plnkr.co/edit/Lxem5HJXe0UCvslqbJr3?p=preview

猜你在找的Angularjs相关文章