Let's say that I have a form name "signupForm". When I use the ng-disabled directive on a button (to disable the form in case its invalid), I use
ng-disabled="{{formName}}.$invalid"> (formName contains the value signupForm)
When I inspect the button in browser, the above directive evaluates to ng-disabled="signupForm.$invalid">. This is perfect. The problem is that when I try to use the same expression inside of the ng-messages directive, like: ng-messages ="{{formName}}.$error"> the expression is NOT interpolated. So if I use the directive on a div and inspect it in browser, I see it as:
<div ng-messages="{{formName}}.$error"></div> whereas I expect it to be shown as <div ng-messages="signupForm.$error"></div>. But this does not happen.
So what can be done to make the ng-messages directive interpolate the expression & show it correctly? I have tested this issue with AngularJS 1.4.7 & 1.5.0-rc.1 and the issue exists in both of them. Any help is appreciated. Thank you.
ng-messages=this[formName].$error