ng-messagesを使って動的フォームを検証する

Question

私は、主にフォームコントロールである再利用可能なコンポーネントの束を作成しようとしています。

ng-formディレクティブの動的な名前を作成して、別のng-formを同じスコープ内に上書きしないようにする必要があります（別の方法があります）。

問題は、式がng-messagesで動作しないため、検証ができないことです。

以下

非常に単純化したデモです（長いテンプレート文字列については申し訳ありません、stacksnippetsにそれを追加するためのより良い方法を見つけることができませんでした）、ちょうど1つのディレクティブのインスタンスなし、他の親スコープを持ちます。しかし実際のシナリオではそれらが存在するので、フォーム名を動的に作成しています。

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、いくつかの類似したものとの記事を読みましたが、それらのどれも

Answer 1

ngMessagesディレクティブにパラメータとしてthis['fg_' + $id].$errorを使用してみてください、この単純なシナリオに答えていません。

作業中のが見つかります。

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>