在AngularJS中使用包含括号的名称验证输入

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.

所以,问题是Angular没有应用那个css类,因为我的输入名称(my_form [email]),是在Angular中引用我的输入的正确表示法。

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

这是一个插件:http://plnkr.co/edit/t7PEilV9maNYGnVYnTDc?p =preview

2 个解决方案

#1

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

引用包含括号的名称的输入的方法是使用括号表示法,如下所示:

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

#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 :

您需要在输入中使用ng-model属性。它使用$ scope中的值绑定字段的内容。您还需要将Javascript对象传递给ng-class指令。在您的示例中,它将是:

<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.

不要犹豫,查看ng-model和ng-class指令文档中的示例。

#1