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
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']">
The example works for me if I change the formControl assignment to registrationForm.gender and registrationForm.a:
<div class="custom-control custom-radio">
<input id="male" type="radio" class="custom-control-input" value="male" [formControl]="registrationForm.gender">
<label class="custom-control-label" for="male">Male</label>
</div>
There is no need to expose the controls directly via a getter. The FormControl is typed directly.