使用 ng-messages 验证动态表单
Validating dynamic forms using ng-messages
我正在尝试创建一堆可重用的组件,主要是表单控件。
出于这个原因,我相信(也许有不同的方法?)我需要为 ng-form
指令创建动态名称,这样它就不会覆盖另一个 ng-form
相同的范围。
问题是我无法进行验证,因为表达式不适用于 ng-messages
。
下面是一个非常简化的演示(对于长模板字符串感到抱歉,找不到更好的方法将其添加到 stacksnippets),只有一个指令实例和没有其他父范围。但在实际情况下,它们会在那里,所以我动态创建表单名称。
angular.module('test', ['ngMessages'])
.directive('formGroup', function() {
return {
scope: {
classList: '='
},
replace: true,
template: '<div class=\"container\" ng-class=\"classList\" ng-form=\"fg_{{$id}}\"><input type=\"text\" name=\"testInput\" ng-model=\"testValue\" required><div ng-messages=\"fg_$id.$error\"><p ng-message=\"required\">Something is wrong!<\/p><\/div><\/div>'
}
});
div.container {
height: 100px;
padding: 5px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.js"></script>
<div ng-app="test">
<form-group classList="sample-class"></form-group>
</div>
如您所见,我正在使用带前缀 fg_
的范围 $id
创建表单名称。但它不像 ng-messages="fg_$id.$error"
和 ng-messages="fg_{{$id}}.$error"
那样工作会抛出错误。
执行此操作的正确方法是什么?如果不正确,我们该如何解决?
P.S:我读过 this question,一些类似的文章和文章,但其中 none 回答了这个简单的场景
尝试使用 this['fg_' + $id].$error
作为 ngMessages
指令的参数。
您可以找到有效的 jsfiddle here。
angular.module('test', ['ngMessages'])
.directive('formGroup', function() {
return {
scope: {
classList: '='
},
replace: true,
template: '<div class=\"container\" ng-class=\"classList\" ng-form=\"fg_{{$id}}\"><input type=\"text\" name=\"testInput\" ng-model=\"testValue\" required><div ng-messages=\"this[\'fg_\' + $id].$error\"><p ng-message=\"required\">Something is wrong!<\/p><\/div><\/div>'
}
});
div.container {
height: 100px;
padding: 5px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.js"></script>
<div ng-app="test">
<form-group classList="sample-class"></form-group>
</div>
我正在尝试创建一堆可重用的组件,主要是表单控件。
出于这个原因,我相信(也许有不同的方法?)我需要为 ng-form
指令创建动态名称,这样它就不会覆盖另一个 ng-form
相同的范围。
问题是我无法进行验证,因为表达式不适用于 ng-messages
。
下面是一个非常简化的演示(对于长模板字符串感到抱歉,找不到更好的方法将其添加到 stacksnippets),只有一个指令实例和没有其他父范围。但在实际情况下,它们会在那里,所以我动态创建表单名称。
angular.module('test', ['ngMessages'])
.directive('formGroup', function() {
return {
scope: {
classList: '='
},
replace: true,
template: '<div class=\"container\" ng-class=\"classList\" ng-form=\"fg_{{$id}}\"><input type=\"text\" name=\"testInput\" ng-model=\"testValue\" required><div ng-messages=\"fg_$id.$error\"><p ng-message=\"required\">Something is wrong!<\/p><\/div><\/div>'
}
});
div.container {
height: 100px;
padding: 5px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.js"></script>
<div ng-app="test">
<form-group classList="sample-class"></form-group>
</div>
如您所见,我正在使用带前缀 fg_
的范围 $id
创建表单名称。但它不像 ng-messages="fg_$id.$error"
和 ng-messages="fg_{{$id}}.$error"
那样工作会抛出错误。
执行此操作的正确方法是什么?如果不正确,我们该如何解决?
P.S:我读过 this question,一些类似的文章和文章,但其中 none 回答了这个简单的场景
尝试使用 this['fg_' + $id].$error
作为 ngMessages
指令的参数。
您可以找到有效的 jsfiddle here。
angular.module('test', ['ngMessages'])
.directive('formGroup', function() {
return {
scope: {
classList: '='
},
replace: true,
template: '<div class=\"container\" ng-class=\"classList\" ng-form=\"fg_{{$id}}\"><input type=\"text\" name=\"testInput\" ng-model=\"testValue\" required><div ng-messages=\"this[\'fg_\' + $id].$error\"><p ng-message=\"required\">Something is wrong!<\/p><\/div><\/div>'
}
});
div.container {
height: 100px;
padding: 5px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.js"></script>
<div ng-app="test">
<form-group classList="sample-class"></form-group>
</div>