gpt4 book ai didi

angularjs - 带有ng-form的有 Angular ng-repeat,在 Controller 中访问验证

转载 作者:行者123 更新时间:2023-12-03 08:40:06 24 4
gpt4 key购买 nike

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

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

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

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

plnk

谢谢!

[EDIT]只是要添加到该问题,此特定示例的工作原理是在动态创建的输入上添加到ng-click中:

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

但是我仍然无法访问 Controller 中动态创建的表单。例如,我想在 namesForm.name.$pristine中添加观察者,以便每当子表单为 mainForm.$setValidity(false)时就可以设置 $dirty,以防止用户在提交所有子表单更改之前提交主表单。

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

最佳答案

更新于2015-01-17:

正如Leblanc Meneses在评论中指出的那样,Angular 1.3 现在支持使用formngForminput指令进行插值。

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

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

您需要注意,可以动态添加表单元素和输入,但是不能动态地将它们添加为的 -插值在ngFormname指令中不起作用。

例如,如果您尝试像这样动态命名嵌套表单:
<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
<!-- ... -->
</div>

而不是像这样在Scopet上使所有嵌套表单都可用:scope['namesForm_0'],您只能访问文字名称为scope['namesForm_{{$index}}']的单个(最后一个)表单。

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

JavaScript:

该指令将监视其形式的$dirty状态以设置$validity以防止在脏时提交,并在按下“clean”按钮时处理设置$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

关于angularjs - 带有ng-form的有 Angular ng-repeat,在 Controller 中访问验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24020503/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com