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

发布时间：2020-12-17 08:27:36 所属栏目：安全来源：网络整理

导读：我试图使用ng-repeat生成一个可编辑的列表。我想提醒用户在继续之前更新任何编辑，所以我使用ng-form快速创建“嵌套”表单，因为文档说我可以在这些动态创建的输入上使用验证。虽然这似乎在HTML中工作，我看不到如何访问这些动态创建的表单和控制器中的相关

我试图使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!