Question

我的页面上有一个联系人列表，每个联系人都显示在<input>字段中（它们都在<form>元素内。当我点击某个字段并进行编辑时，我想进行一些验证 - 例如，如果字段不为空，我想给这个字段一个红色BG和/或在这个确切的字段下面显示一条消息。所以我试过这个：

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

但我不知道如何将此部分name="{{contact.en_name}}"与此<p ng-show="contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine"相关联。

我也尝试使用$index作为名称：

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

但那也没有用 - 我没有看到任何错误信息。

我做错了什么，如何让它发挥作用？

Answer 1

问题是?? 0内的所有输入字段都具有相同的名称属性（因此所有输入字段都指向表单对象中的相同ng-repeat），因此不知何故，您需要使每个name属性都是唯一的。您可以使用name使其独一无二。

<强>标记

$index

Angularjs形成vaidation

1 个答案: