使用AngularJS在表单中进行动态验证和命名
我有这个表单：http://jsfiddle.net/dfJeN/
如您所见，输入的name值是静态设置的：
name="username"，表单验证工作正常(添加一些内容并从输入中删除所有文本，必须显示一个文本)。
然后，我尝试动态设置Name值：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
回答 9
Stack Overflow用户
发布于 2013-01-17 21:04:10
你不能用这种方式做你想做的事情。
假设您正在尝试做的是需要动态地向表单添加元素，使用类似于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的一个有据可查的特性。
Stack Overflow用户
发布于 2014-01-25 00:18:46
使用嵌套的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);
}
};
});现在，只要“dynamic -name”属性而不是“name”属性，就可以在需要的地方使用动态名称。
例如：
<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>Stack Overflow用户
发布于 2014-04-14 23:57:38
根据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上的演示。
https://stackoverflow.com/questions/14378401
复制相似问题
腾讯云开发者
