Javascript 棱角形

我的页面上有一个联系人列表，每个联系人都显示在一个

字段中（它们都在

元素中）。当我单击一个字段并编辑它时，我想进行一些验证-例如，如果该字段不是空的，我想给该字段一个红色背景，并/或在该字段下方显示一条消息。因此我尝试了以下方法：

<form name="contactsForm" ng-submit="update()" novalidate>
    <tr class="row">
        <td colspan="2">
            <input type="text" class="form-control" placeholder="Search for contact" ng-model="filter.userSearch"/>
            <button class="btn btn-primary btn-sm btn-delete" ng-click="clearSearchField()"></button>
        </td>
        <td>
            <button class="btn btn-warning" ng-click="toggleNewContact()">Add User</button>
            <button type="submit" class="btn btn-danger">Update</button>
        </td>

    </tr>
    <tr class="row" ng-if="addNewContact" ng-repeat="new in newContacts">

        <td><input type="text" class="col-md-12 form-control" ng-model="new.en_name"></td>
        <td><input type="text" class="col-md-12 form-control" ng-model="new.email"></td>
        <td>
            <button ng-click="addMore()" class="btn btn-sm btn-success glyphicon glyphicon-plus"></button>
            <button ng-click="addLess(new)" class="btn btn-sm btn-danger glyphicon glyphicon-minus"></button>
        </td>
    </tr>
    <tr class="row" ng-repeat="contact in contactList | filter:filter.userSearch track by $index">
        <td class="form-group" ng-class="{ 'has-error' : contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine }">
            <input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="en_name" required>
            <p ng-show="contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine" class="help-block">Name in English is required.</p>
        </td>
        <td>
             <input type="text" class="col-md-12 form-control" ng-model="contact.email" name="{{contact.email}}" required>
        </td>
    </tr>
</form>

<input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="{{contact.en_name}}" required>

但这也不起作用-我没有看到任何错误消息

---

我做错了什么以及如何使其工作？

问题是

ng repeat

中的所有输入字段都具有相同的名称属性（因此所有字段都指向表单对象中相同的

name

），因此您需要以某种方式使每个名称属性都是唯一的。您可以使用

$index

使其唯一

标记

<td class="form-group" ng-class="{ 'has-error' : contactsForm['en_name'+$index].$invalid && !contactsForm['en_name'+$index].$pristine }">
   <input type="text" class="col-md-12 form-control" 
     ng-model="contact.en_name" ng-attr-name="{{'en_name'+$index}}" required>
   <p ng-show="contactsForm['en_name'+$index].$invalid && !contactsForm['en_name'+$index].$pristine" 
    class="help-block">
      Name in English is required.
    </p>
</td>

必须提供英文姓名。

在您的第一个代码片段中，只需将

必需的
属性添加到输入中。请问您为什么需要基于
ng model
value
contact.en_name
？@dfsq的
输入字段的
名称
属性？但它有它…
@PankajParkar从我所读的内容来看，我必须有
名称
属性才能进行表单验证，我没有吗？有什么建议吗？尝试过，但不幸的是它仍然不起作用。我尝试将名称更改为
name=“en\u name”{{{$index}}
，然后验证为
，但仍然没有错误消息。尝试过，仍然没有任何结果。顺便说一句，当我查看代码检查器时，我看到的是：
ng attr name=“{{en_name'+$index}”
，没有实际的索引号。@Igal你能不能给我一个plunkr，这样我就可以深入研究它了..虽然我确信上面的方法应该有效..好的，我正在处理plunkr，然后我注意到了一个错误-我的
元素定义在不正确的位置，应该在
元素之前。所以我改变了它，用t尝试了它我之前提到的名字和我在同一个回复中提到的验证，
，它终于起作用了！！！非常感谢！：@Igal很高兴知道这一点。。谢谢：-）
<td class="form-group" ng-class="{ 'has-error' : contactsForm['en_name'+$index].$invalid && !contactsForm['en_name'+$index].$pristine }">
   <input type="text" class="col-md-12 form-control" 
     ng-model="contact.en_name" ng-attr-name="{{'en_name'+$index}}" required>
   <p ng-show="contactsForm['en_name'+$index].$invalid && !contactsForm['en_name'+$index].$pristine" 
    class="help-block">
      Name in English is required.
    </p>
</td>