使用ng-messages验证动态表单

Question

我试图创建一堆可重用组件，主要是表单控件。由于这个原因，我相信（也许有不同的方法呢？）我需要为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>

正如你可以看到我创建使用范围$id的前缀fg_形式的名称。但它不起作用，如ng-messages="fg_$id.$error"和ng-messages="fg_{{$id}}.$error"抛出错误。

什么是正确的方法来做到这一点，或者如果不是，我们如何解决它？

---

P.S：我读过this question，几个类似的人，物品，但没有人回答这个简单的场景

Answer 1

尝试使用this['fg_' + $id].$error作为参数传递给ngMessages指令。

你可以找到工作jsfiddle here。

Answer 2

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>