Search code examples
angularangular-reactive-forms

Angular radio button unchecks other controls on select

Using Angular 17 and reactive form.

There are two controls in the form group and both are radio buttons.

However, when one control is changed, it clears the other controls. However, the value is valid in all controls.

Here is a Stackbliz link with the issue https://stackblitz.com/edit/angular-radio-buttons-demo-reactive-forms-f3tiep?file=src%2Fapp%2Fapp.component.html

Solution

  • Don't know why or where to find this in the docs...

    However, you need to set a "name" attribute on the radio buttons to distinguish the radio groups.

    Changes to your 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']">