带有ng-form的有角ng-repeat，在控制器中访问验证

燕嘉颖

2023-03-14

问题内容：

我正在尝试使用生成一个可编辑列表ng-repeat。我想提醒用户在继续操作之前更新所有编辑内容，因此我正在使用ng- form中动态创建“嵌套”表单，因为文档说我可以在这些动态创建的输入上使用验证。

尽管这似乎可以在HTML中运行，但我看不到如何在控制器中访问那些动态创建的表单和相关的验证字段。具体来说，当用户更改输入时，我使用$
dirty属性形式调出一个按钮来告诉用户提交更改。到目前为止，一切都很好。但是，一旦提交更改，我想$setPristine()在字段上指示已设置更改。在允许提交主要表单之前，可能还有其他方法可以确保对每个输入进行更改，但这是我能想到的最好的方法。

不幸的是，即使文档说如果我命名ng-form，它将被传播到$scope对象，但我找不到找到它的方法。 $scope.dynamic_form未定义。

这是一个显示我的意思的朋克：

谢谢！

[编辑]只是为了增加问题，此特定示例的工作原理是将其添加到ng-click动态创建的输入中：

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

但是我仍然无法访问控制器中动态创建的表单。例如，我想向添加一个监视程序，namesForm.name.$pristine以便mainForm.$setValidity(false)在子表单$dirty阻止用户提交所有子表单更改之前阻止用户提交主表单时可以进行设置。

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

问题答案：

2015年1月17日更新：

正如评论所指出的勒布朗梅内塞斯 角1.3 现在支持插值form，ngForm和input指令。

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

<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很快就会变得棘手。

您需要注意，可以动态添加表单元素和输入，但不能动态 命名它们 -插值在ngFormor name指令中不起作用。

例如，如果您尝试像这样动态命名嵌套表单：

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

而不是像这样在作用域上使所有嵌套表单可用：scope['namesForm_0']您只能访问具有文字名称的单个（最后一个）表单scope['namesForm_{{$index}}']。

在你的情况，你需要创建一个将随着加入自定义指令ngForm来处理设置 $pristine$ 和$invalid该窗体实例。

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>

为此，在form-cleaner旁边添加ng-form：

<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

带有ng-form的有角ng-repeat，在控制器中访问验证

相关阅读

相关文章

相关问答

相关工具

相关文档