我有这个表格：http: //jsfiddle.net/dfJeN/
如您所见，输入的名称值是静态设置的：
name="username"
，表单验证工作正常（添加一些内容并从输入中删除所有文本，必须出现文本）。
然后我尝试动态设置名称值：http: //jsfiddle.net/jNWB8/
name="{input.name}"
然后我将此应用于我的验证
login.{{input.name}}.$error.required
（此模式将在 ng-repeat 中使用）但我的表单验证已损坏。它在我的浏览器中被正确解释（如果我检查我看到的元素 login.username.$error.required）。
任何的想法 ？
编辑：在控制台中记录范围后，似乎
{{input.name}}
表达式不是插值。我的表单作为 {{input.name}} 属性但没有用户名。
更新：自 1.3.0-rc.3 name="{{input.name}}" 按预期工作。请参阅#1404
你不能那样做你想做的事。
假设你想要做的是你需要动态地将元素添加到表单中，比如 ng-repeat，你需要使用嵌套的 ng-form来允许验证这些单独的项目：
<form name="outerForm">
<div ng-repeat="item in items">
<ng-form name="innerForm">
<input type="text" name="foo" ng-model="item.foo" />
<span ng-show="innerForm.foo.$error.required">required</span>
</ng-form>
</div>
<input type="submit" ng-disabled="outerForm.$invalid" />
</form>
遗憾的是，这并不是 Angular 的一个有据可查的特性。
使用嵌套的 ngForm 允许您从 HTML 模板中访问特定的 InputController。但是，如果您希望从另一个控制器访问它，则无济于事。
例如
<script>
function OuterController($scope) {
$scope.inputName = 'dynamicName';
$scope.doStuff = function() {
console.log($scope.formName.dynamicName); // undefined
console.log($scope.formName.staticName); // InputController
}
}
</script>
<div controller='OuterController'>
<form name='myForm'>
<input name='{{ inputName }}' />
<input name='staticName' />
</form>
<a ng-click='doStuff()'>Click</a>
</div>
我使用这个指令来帮助解决问题：
angular.module('test').directive('dynamicName', function($compile, $parse) {
return {
restrict: 'A',
terminal: true,
priority: 100000,
link: function(scope, elem) {
var name = $parse(elem.attr('dynamic-name'))(scope);
// $interpolate() will support things like 'skill'+skill.id where parse will not
elem.removeAttr('dynamic-name');
elem.attr('name', name);
$compile(elem)(scope);
}
};
});
现在，只要需要“动态名称”属性而不是“名称”属性，就可以使用动态名称。
例如
<script>
function OuterController($scope) {
$scope.inputName = 'dynamicName';
$scope.doStuff = function() {
console.log($scope.formName.dynamicName); // InputController
console.log($scope.formName.staticName); // InputController
}
}
</script>
<div controller='OuterController'>
<form name='myForm'>
<input dynamic-name='inputName' />
<input name='staticName' />
</form>
<a ng-click='doStuff()'>Click</a>
</div>
根据Github上的讨论，这个问题应该在 AngularJS 1.3 中得到解决。
同时，这是@caitp和@Thinkscape创建的临时解决方案：
// Workaround for bug #1404
// https://github.com/angular/angular.js/issues/1404
// Source: http://plnkr.co/edit/hSMzWC?p=preview
app.config(['$provide', function($provide) {
$provide.decorator('ngModelDirective', function($delegate) {
var ngModel = $delegate[0], controller = ngModel.controller;
ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
var $interpolate = $injector.get('$interpolate');
attrs.$set('name', $interpolate(attrs.name || '')(scope));
$injector.invoke(controller, this, {
'$scope': scope,
'$element': element,
'$attrs': attrs
});
}];
return $delegate;
});
$provide.decorator('formDirective', function($delegate) {
var form = $delegate[0], controller = form.controller;
form.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
var $interpolate = $injector.get('$interpolate');
attrs.$set('name', $interpolate(attrs.name || attrs.ngForm || '')(scope));
$injector.invoke(controller, this, {
'$scope': scope,
'$element': element,
'$attrs': attrs
});
}];
return $delegate;
});
}]);
JSFiddle上的演示。
@EnISeeK 写的不错……但我让它更优雅，对其他指令不那么突兀：
.directive("dynamicName",[function(){
return {
restrict:"A",
require: ['ngModel', '^form'],
link:function(scope,element,attrs,ctrls){
ctrls[0].$name = scope.$eval(attrs.dynamicName) || attrs.dynamicName;
ctrls[1].$addControl(ctrls[0]);
}
};
}])
只是对 EnlSeek 解决方案的一点改进
angular.module('test').directive('dynamicName', ["$parse", function($parse) {
return {
restrict: 'A',
priority: 10000,
controller : ["$scope", "$element", "$attrs",
function($scope, $element, $attrs){
var name = $parse($attrs.dynamicName)($scope);
delete($attrs['dynamicName']);
$element.removeAttr('data-dynamic-name');
$element.removeAttr('dynamic-name');
$attrs.$set("name", name);
}]
};
}]);
我稍微扩展了 @caitp 和 @Thinkscape 解决方案，以允许动态创建嵌套的 ng-forms，如下所示：
<div ng-controller="ctrl">
<ng-form name="form">
<input type="text" ng-model="static" name="static"/>
<div ng-repeat="df in dynamicForms">
<ng-form name="form{{df.id}}">
<input type="text" ng-model="df.sub" name="sub"/>
<div>Dirty: <span ng-bind="form{{df.id}}.$dirty"></span></div>
</ng-form>
</div>
<div><button ng-click="consoleLog()">Console Log</button></div>
<div>Dirty: <span ng-bind="form.$dirty"></span></div>
</ng-form>
</div>
这是我在JSFiddle上的演示。
我使用了 Ben Lesh 的解决方案，它对我很有效。但是我面临的一个问题是，当我使用添加一个内部表单时，如果我使用该指令ng-form，所有表单状态（例如form.$valid, form.$erroretc）都变得未定义。ng-submit
因此，例如，如果我有这个：
<form novalidate ng-submit="saveRecord()" name="outerForm">
<!--parts of the outer form-->
<ng-form name="inner-form">
<input name="someInput">
</ng-form>
<button type="submit">Submit</button>
</form>
在我的控制器中：
$scope.saveRecord = function() {
outerForm.$valid // this is undefined
}
所以我不得不回到使用常规点击事件来提交表单，在这种情况下，有必要传递表单对象：
<form novalidate name="outerForm"> <!--remove the ng-submit directive-->
<!--parts of the outer form-->
<ng-form name="inner-form">
<input name="someInput">
</ng-form>
<button type="submit" ng-click="saveRecord(outerForm)">Submit</button>
</form>
以及修改后的控制器方法：
$scope.saveRecord = function(outerForm) {
outerForm.$valid // this works
}
我不太清楚为什么会这样，但希望它可以帮助某人。
此问题已在 Angular 1.3+ 中修复这是您尝试执行的正确语法：
login[input.name].$invalid
如果我们为如下输入设置动态名称
<input name="{{dynamicInputName}}" />
然后我们对动态名称使用集合验证，如下面的代码。
<div ng-messages="login.dynamicInputName.$error">
<div ng-message="required">
</div>
</div>