Angularjs формы Vaidation

Question

У меня есть список контактов на моей странице, каждый из которых отображается внутри <input> поле (они все внутри <form> элемент. Когда я щелкаю поле и редактирую его, я хочу провести некоторую проверку - например, если поле не пустое, я хочу присвоить этому полю красный фоновый рисунок и / или отобразить сообщение под этим точным полем. Итак, я попробовал это:

<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

Проблема в том, что у вас все поля ввода внутри 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>