使用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>