Ответ 1
Эти переключатели "подключены" браузером, так как вы даете им одно и то же имя. Просто отбросьте атрибут name
, и все начнет работать, как ожидалось:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
Смотрите это 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>
Эти переключатели "подключены" браузером, так как вы даете им одно и то же имя. Просто отбросьте атрибут name
, и все начнет работать, как ожидалось:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
В соответствии с вашим последним комментарием, я пробовал это, и он работает. Я не использую встроенную валидацию 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 проверка формы и проверка браузера с помощью флажков и радиостанций не очень прочны.