我在AngularJS中有以下静态形式:
<form name="myForm" class="form-horizontal"> <label>First Name:</label> <input type="text" name="first_name" ng-model="entity.first_name"> <label>Last Name:</label> <input type="text" name="last_name" ng-model="entity.last_name"> </form>
Angular为我创建一个FormController并将它发布到范围中(在表单名称下)。这意味着我可以访问如下属性:
$scope.myForm.first_name.$error $scope.myForm.last_name.$invalid ...
这是超级有用!
但在我的case我使用指令动态建立一个表单:
<form name="myForm" class="form-horizontal"> <field which="first_name"></field> <field which="last_name"></field> </form>
< field>指令不解析为实际的< input>元素,直到一段时间后(我从服务器获取一些数据,链接指令等)。
这里的问题是没有字段属性在表单控制器上定义,好像动态字段没有注册到FormController:
// The following properties are UNDEFINED (but $scope.myForm exists) $scope.myForm.first_name $scope.myForm.last_name
你可以看到这个jsFiddle中的整个代码:
http://jsfiddle.net/vincedo/3wcYV/
更新7/31/2015这已经修复从1.3,参见这里:
https://github.com/angular/angular.js/issues/1404#issuecomment-125805732
原文链接:https://www.f2er.com/angularjs/145361.html原始答案
这是不幸的是,AngularJS的一个短暂的来临。 Angular的表单验证不适用于动态命名的字段。您可以在HTML底部添加以下内容,以查看发生了什么:
<pre>{{myForm|json}}</pre>
正如你可以看到,Angular没有得到动态输入名称。目前有一个涉及嵌套表单的工作,可以得到一种讨厌,但它的工作和(有一点额外的工作)将提交父表单没有麻烦。
如果你想,你可以鼓起更多的支持的问题:GitHub Issue – dynamic element validation.无论哪种方式,这里的代码:
http://jsfiddle.net/langdonx/6H8Xx/2/
HTML:
<div data-ng-app> <div data-ng-controller="MyController"> <form id="my_form" name="my_form" action="/echo/jsonp/" method="get"> <div data-ng-repeat="field in form.data.fields"> <ng-form name="form"> <label for="{{ field.name }}">{{ field.label }}:</label> <input type="text" id="{{ field.name }}" name="{{field.name}}" data-ng-model="field.data" required> <div class="validation_error" data-ng-show="form['\{\{field.name\}\}'].$error.required">Can't be empty.</div> </ng-form> </div> <input type="submit" /> </form> </div> </div>
JavaScript:
MyController.$inject = ["$scope"]; function MyController($scope) { $scope.form = {}; $scope.form.data = {}; $scope.form.data.fields = [] var f1 = { "name": "input_1","label": "My Label 1","data": "" }; var f2 = { "name": "input_2","label": "My Label 2","data": "" }; $scope.form.data.fields.push(f1); $scope.form.data.fields.push(f2); }