Валидация каждого элемента из списка инпутов AngularJS

Рейтинг: 0Ответов: 1Опубликовано: 29.12.2014

Упрощенный код:

<div ng-repeat="(key, item) in items">

    <input type="text" name="lastName" ng-pattern="/^[а-яА-ЯёЁ\-\s]{1,}$/" id="lastnameid{{key}}">

    <div class="alert alert-danger" ng-show="FormName.lastName.$dirty && FormName.lastName.$invalid">
        Некорректная фамилия
    </div>

</div>

Убрал лишние элементы. Замечу, что items - это модель angularJS, представляет собой массив объектов.

Такая конструкция валидирует только в случае неправильного значения в последнем инпуте, но сообщение показывает около всех. Мне необходим изменяемый список инпутов на клиенте (удаление и добавление реализовано), но валидация должна быть у каждого отдельно.

Пробовал делать массив инпутов lastName[{{key}}], и обращаться FormName.lastName[key] - не помогло.

angularjs
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Попробуйте обернуть блок в <ng-form> и обращаться при валидации через name добавленного ng-form, в итоге у вас получится такой код:

<div ng-repeat="(key, item) in items">
  <ng-form name="formItem">
    <input type="text" name="lastName" ng-pattern="/^[а-яА-ЯёЁ\-\s]{1,}$/" id="lastnameid{{key}}">
    <div class="alert alert-danger" ng-show="formItem.lastName.$dirty && formItem.lastName.$invalid">
        Некорректная фамилия
    </div>
  </ng-form>
</div>

Судя по описанию в документации добавление ng-form должно помочь решить вашу проблему