虽然这似乎在HTML中工作,我看不到如何访问这些动态创建的表单和控制器中的相关验证字段。具体来说,当用户更改输入时,我使用$ dirty属性来启动一个按钮来告诉用户提交更改。到现在为止还挺好。但是,一旦更改提交,我想对字段的$ setPristine()表示已经设置更改。可能有其他方法确保在允许主表单承诺之前对每个输入执行更改,但是这是我可以想出的最好的。
不幸的是,即使文档说如果我命名ng-form它将传播到$ scope对象,我找不到一种方法来访问它。 $ scope.dynamic_form未定义。
这里是一个plunker显示我的意思:
谢谢!
[EDIT]只是为了添加到问题,什么是这个具体的例子的工作是添加到ng单击动态创建的输入:
ng-click="namesForm.name.$setPristine();clean()"
但我仍然没有访问动态创建的形式在控制器。例如,我想向namesForm.name。$ pristine添加一个观察者,这样当子表单是$ dirty时,我可以设置mainForm。$ setValidity(false),以防止用户提交主表单,直到所有子表单更改都已提交。
简而言之,问题是如何在父控制器中访问动态创建的嵌套ngForm的验证值?
正如Leblanc Meneses在评论中指出的,Angular 1.3现在支持使用形式,ngForm和输入指令进行插值。
这意味着使用表达式来命名您的元素:
<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或名称伪指令中不起作用。 例如,如果您试图按如下方式动态命名嵌套表单:
<div ng-form="namesForm_{{$index}}" ng-repeat="name in names"> <!-- ... --> </div>
而不是使所有的嵌套表单可用在范围上像这样:scope [‘namesForm_0’],你将只能访问具有文字名称范围[‘namesForm _ {{$ index}}’]的单个(最后)表单。
在您的情况下,您需要创建一个自定义指令,将与ngFormto处理设置$ pristine $和$无效的表单实例一起添加。
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