33

我正在尝试使用ng-repeat. 我想提醒用户在继续之前更新任何编辑，所以我使用动态ng-form创建“嵌套”表单，因为文档说我可以对这些动态创建的输入使用验证。

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

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

这是一个显示我的意思的plunker：

plnk

谢谢！

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

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

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

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

4

1 回答 1

44

2015 年 1 月 17 日更新：

正如 Leblanc Meneses 在评论中指出的那样，Angular 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会很快变得棘手。

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

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

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

而不是像这样在范围内提供所有嵌套表单：scope['namesForm_0']您只能访问具有文字 name 的单个（最后一个）表单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

于 2014-06-05T01:42:46.157 回答