При использовании ng-формы с ng-repeat подключаются переключатели AngularJs

Смотрите это plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview

При использовании тега ng-формы в ng-repeat, который содержит группу переключателей, переключатели связаны, поэтому, если вы проверите переключатель в одном ng-повторе, он отменит выбор во всех других ng-повторах. Это меня озадачивает, поскольку модель ng-repeat в остальном изолирована от других элементов. Это проблема не только при использовании ng-repeat. Это также происходит при наличии нескольких экземпляров настраиваемой директивы с изолированной областью, которая отображает

<div ng-form name="myForm">

В Plnkkr попробуйте добавить несколько элементов и проверить переключатели на некоторых элементах. Они должны быть независимыми, но это не так.

Является ли это ошибкой в Angular? Если нет, то почему это работает так и как я могу обойти это?

<form name="mainForm" ng-submit="submitAll()">
      <ul>
        <li ng-repeat="item in items" ng-form="subForm">          
          <input type="text" required name="name" ng-model="item.name"/>
          <input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
          <input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
          <span ng-show="subForm.name.$error.required">required</span>
          <button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
        </li>
      </ul>
      <button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
    </form>

Ответ 1

Эти переключатели "подключены" браузером, так как вы даете им одно и то же имя. Просто отбросьте атрибут name, и все начнет работать, как ожидалось: http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview

Ответ 2

В соответствии с вашим последним комментарием, я пробовал это, и он работает. Я не использую встроенную валидацию angular, но я считаю, что она работает одинаково и очень проста

    <li ng-repeat="item in items" ng-form="subForm">
      <input type="text" required name="name" ng-model="item.name"/>
      <input type="radio" value="r1" ng-model="item.radio" /> r1
      <input type="radio" value="r2" ng-model="item.radio" /> r2
      <span ng-show="item.radio==''">required</span>
      <button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
    </li>

См. мой рабочий пример в http://wiredbeast.com/coolframework/stackover.html

Трюк использует ng-show="item.radio==''", чтобы показать ошибку проверки и отключить кнопку "Отправить один".

По моему честному мнению angular проверка формы и проверка браузера с помощью флажков и радиостанций не очень прочны.