Confirm input with name containing brackets in AngularJS

Question

I have a form input with names containing brackets, for example:

<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 does not apply this css class because of the name of my input (my_form [email]), it is that the correct notation is to reference my entry in Angular.

Here is the plunge: http://plnkr.co/edit/t7PEilV9maNYGnVYnTDc?p=preview

Answer 1

The way to refer to an input with a name containing brackets uses parenthesis notation, for example:

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

Answer 2

You need to use the ng-model attribute on your input. It associates the contents of a field with a value in $scope . You also need to pass the Javascript object to the ng-class directive. In your example, this would be:

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

Feel free to look at the examples in ng-model and ng-class .