MyT*_*der 33 validation angularjs angularjs-ng-repeat angularjs-ng-form
我正在尝试使用生成可编辑列表ng-repeat.我想提醒用户在继续之前更新任何编辑,因此我正在使用动态ng-form创建"嵌套"表单,因为文档说我可以对这些动态创建的输入使用验证.
虽然这似乎在HTML中工作,但我没有看到如何在控制器中访问那些动态创建的表单和相关的验证字段.具体来说,当用户更改输入时,我使用表单$ dirty属性调出一个按钮来告诉用户提交更改.到现在为止还挺好.但是,一旦提交了更改,我希望$setPristine()在该字段上指示已设置更改.在我允许提交主表单之前,可能还有其他方法可以确保在每个输入上提交更改,但这是我能想到的最好的方法.
不幸的是,即使文档说如果我将ng-form命名为它将传播到$scope对象,我找不到访问它的方法. $scope.dynamic_form未定义.
这是一个显示我的意思的plunker:
谢谢!
[编辑]只是为了添加问题,这个特定示例的工作原理是添加到ng-click动态创建的输入上:
ng-click="namesForm.name.$setPristine();clean()"
但我仍然无法访问控制器中动态创建的表单.例如,我希望添加一个观察程序,namesForm.name.$pristine以便我可以设置mainForm.$setValidity(false)子表单,$dirty以防止用户提交主表单,直到所有子表单更改都已提交.
简而言之,问题是如何在父控制器中访问动态创建的嵌套ngForm的验证值？
Sly*_*nal 44
2015-01-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
| 归档时间： |
|
| 查看次数： |
37164 次 |
| 最近记录： |