validate input with name containing brackets in AngularJS

Question

I have a form input with names containing brackets, e.g.:

<form name="my_form">  
    <input type="text" name="my_form[email]" ng-model="email" ng-class="'mycssclass': my_form.my_form[email].$invalid">
</form>

So, the problem is that Angular is not applying that css class because of the name of my input (my_form[email]), is that the correct notation to reference my input in Angular.

Here's is a plunk: http://plnkr.co/edit/t7PEilV9maNYGnVYnTDc?p=preview

Answer 1

The way to reference an input with a name containing brackets is using brackets notation, like this:

my_form['my_form[email]'].$invalid

Answer 2

You need to use the ng-model attribute in your input. It bind the content of a field with a value in the $scope. You also need to pass a Javascript Object to the ng-class directive. In your example it would be :

<form name="my_form">  
    <input type="text" ng-model="my_form.email" ng-class="{'mycssclass': my_form.email.$invalid}">
</form>

Don't hesitate to look at the examples in the ng-model and ng-class directive documentation.