javascript - 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>

ご覧のとおり$id、プレフィックス付きのスコープを使用してフォーム名を作成していますfg_。しかし、それはうまくいかずng-messages="fg_$id.$error"、ng-messages="fg_{{$id}}.$error"エラーがスローされます。

これを行う適切な方法は何ですか? そうでない場合、どうすれば回避できますか?

---

PS:この質問、いくつかの類似したものや記事を読みましたが、この単純なシナリオに答えるものはありません