5

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

0

2 Answers 2

5

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

my_form['my_form[email]'].$invalid
Sign up to request clarification or add additional context in comments.

Comments

0

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.

4 Comments

I'm sorry I didn't add the ng-model directive in my example, but I'm using it, that's not the problem. My problem is the input name containing braces.
Could you provide a plunkr of your problem ?
Here is the corrected version of your plunkr: plnkr.co/edit/tz0Bmbt7HNmEOiFxXwgG?p=preview. Basically, you needed to change the name of the input to email and the error class trigger to my_form.email.$invalid.
obviously, if I change the name of the input it should work... but in my case I could not change the name of the input.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.