我想使用指令中创建的字段创建表单。数据的数据绑定(bind)工作正常，但验证不起作用。
这是 html:
<body ng-controller="MainCtrl">
<h1>form</h1>
<form name="form">
<div ng-repeat="conf in config">
<div field data="data" conf="conf"></div>
</div>
</form>
<pre>{{data|json}}</pre>
</body>
Controller 和字段指令:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {name: '', age: ''}
$scope.config = [
{field: 'name', required:true},
{field: 'age'}
];
});
app.directive('field', function ($compile) {
return {
scope: {
data: '=',
conf: '='
},
link: function linkFn(scope, element, attrs) {
// field container
var row = angular.element('<div></div>');
// label
row.append(scope.conf.field + ': ');
// field input
var field = angular.element('<input type="text" />');
field.attr('name', scope.conf.field);
field.attr('ng-model', 'data.' + scope.conf.field);
if (scope.conf.required) {
field.attr('required', 'required');
}
row.append(field);
// validation
if (scope.conf.required) {
var required = angular.element('<span>required</span>');
required.attr('ng-show',
'form.' + scope.conf.field + '.$error.required');
row.append(required);
}
$compile(row)(scope);
element.append(row);
}
}
});
问题是字段 name 的验证不起作用，并且验证文本 required 从未显示。可能是 ng-show 中的 form 在指令中未知。但我不知道如何将表单传递到字段指令中。你能帮我解决这个问题吗？谢谢。
最佳答案
待办事项:
之前:
$compile(row)(scope);
element.append(row);
之后:
element.append(row);
$compile(row)(scope);
设施中“planker”中的 p/s 添加 css:
.ng-invalid {
border: 1px solid red;
}
关于angularjs - 如何验证 Angular 指令中的动态表单字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16367991/