2015 年 1 月 17 日更新:
正如 Leblanc Meneses 在 cmets 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
使用表单和ngFormController 很快就会变得棘手。
您需要注意,您可以动态添加表单元素和输入,但不能动态命名 - 插值在 ngForm 或 name 指令中不起作用。 p>
例如,如果您尝试像这样动态命名嵌套表单:
<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
<!-- ... -->
</div>
您将只能访问具有文字名称scope['namesForm_{{$index}}'] 的单个(最后一个)表单,而不是像这样在范围内提供所有嵌套表单:scope['namesForm_0']。
在您的情况下,您需要创建一个自定义指令,该指令将与 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>
为此,在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