Радиокнопка Angular снимает флажки с других элементов управления при выборе
Использование Angular 17 и реактивной формы.
В группе форм есть два элемента управления, и оба являются переключателями.
Однако при изменении одного элемента управления другие элементы управления очищаются. Однако это значение действительно для всех элементов управления.
Вот ссылка Stackbliz с этой проблемой https://stackblitz.com/edit/angular-radio-buttons-demo-reactive-forms-f3tiep?file=src%2Fapp%2Fapp.comComponent.html
Ответы 2
Не знаю, почему и где найти это в документах...
Однако вам необходимо установить атрибут «имя» для переключателей, чтобы различать группы переключателей.
Изменения в вашем stackblitz:
<input id = "male" name = "g1" type = "radio" class = "custom-control-input" value = "male" [formControl] = "f['gender']">
<input id = "female" name = "g1" type = "radio" class = "custom-control-input" value = "female" [formControl] = "f['gender']">
<input id = "male1" name = "g2" type = "radio" class = "custom-control-input" value = "male1" [formControl] = "f['a']">
<input id = "female1" name = "g2" type = "radio" class = "custom-control-input" value = "female1" [formControl] = "f['a']">
Обратите внимание, что это всего лишь обходной путь. Вам следует использовать угловой способ ссылки на входные данные в группе форм, чтобы сохранить их для будущих обновлений. Вот документация: angular.dev/guide/forms/…
Чтобы сделать это чистым, вам следует использовать formContolName вместо передачи всего formControl во входные данные.
Используйте это следующим образом:
<div class = "custom-control custom-radio">
<input id = "male" type = "radio" class = "custom-control-input" value = "male" formControlName = "gender">
<label class = "custom-control-label" for = "male">Male</label>
</div>
<div class = "custom-control custom-radio">
<input id = "female" type = "radio" class = "custom-control-input" value = "female" formControlName = "gender">
<label class = "custom-control-label" for = "female">Female</label>
</div>
При этом вам не нужны дополнительные свойства имени и вы полностью используете реактивные формы Angular.
Документацию для этого можно найти здесь: https://angular.dev/guide/forms/reactive-forms#associate-the-formgroup-model-and-view
Что, если входные данные находятся в дочернем компоненте, а группа форм — в родительском компоненте?
В этом случае вам следует рассмотреть возможность реализации интерфейса ControlValueAccessor (множество руководств можно найти на сайте www).
Добавление
nameсработало. Спасибо!