Menu
I have a set of three radio buttons which are three form controls of a form group in Angular 4. I want only one of them to be selected at a time for which I have to give three of them a common name but while doing so I get an error saying:
Error: If you define both a name and a formControlName attribute on your radio button, their values must match.
<html>
<form [formGroup]="myGroup">
<input type="radio" formControlName="food" name="food">
<input type="radio" formControlName="food" name="food">
<input type="radio" formControlName="food" name="food">
</form>
</html>
I cannot give same formControlName to all three as they should be unique. What should I do?
935
asked Nov 04 '25 22:11
You have to set a unique value to each of them
<html>
<form [formGroup]="myGroup">
<input type="radio" formControlName="food" name="food" value="banana" checked>
<input type="radio" formControlName="food" name="food" value="strawberry">
<input type="radio" formControlName="food" name="food" value ="nut">
</form>
</html>
This should do.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With