我在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>
角为我创建的FormController,并将其发布到范围(下窗体名称)。 这意味着我有机会获得像以下特性:
$scope.myForm.first_name.$error
$scope.myForm.last_name.$invalid
...
这是超级有用!
但在我的情况下,我动态生成表格,使用指令:
<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/
更新2015年7月31日以来1.3此问题已修复,在这里看到: https://github.com/angular/angular.js/issues/1404#issuecomment-125805732
原来的答案这是不幸的是AngularJS此刻很短的到来。 角的形式验证不使用动态命名下地干活。 您可以在HTML的底部添加以下,看看究竟发生了什么:
<pre>{{myForm|json}}</pre>
正如你所看到的,角度是没有得到动态输入姓名权。 公司目前旗下有周围的工作涉及嵌套形式,可以得到一种讨厌的,但它确实工作,(有一些额外的工作)将提交父窗体没有麻烦。
如果你愿意,你可以去鼓起来的问题,更多的支持: GitHub的问题-动态元素的验证 。 无论哪种方式,这里的代码:
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);
}
我遇到了类似的问题,我和我的所作所为来解决它放入字段的名称调用$汇编模板之前。 一个简单的做与string.replace的伎俩。 话又说回来,这是唯一可能的,因为我是越来越领域模板通过HTTP,并已获得模板文本。
更新:这里是一个小黑客小提琴,使您的工作例
app.directive('field', function($compile) {
var linker= function(scope, element){
var template = '<input type="text" name="{{fname}}" ng-model="model">'
.replace('{{fname}}', scope.fname);
element.html(template)
$compile(element.contents())(scope)
}
return {
restrict: 'E',
scope: {
fname: '=',
model: '='
},
replace: true,
link: linker
};
});
http://jsfiddle.net/2Ljgfsg9/4/