Radio button: using [formControl] instead of [formControlName]

Let's assume I have the following form in an Angular component. The 3 form controls are radio buttons:

form = new FormGroup({
formControl: new FormControl(),
formControl2: new FormControl(),
formControlName: new FormControl()
});


When creating the radio buttons on the template, all the examples I've seen use [formControlName], like so:

<form [formGroup]="form">
<input
type="radio"
id="formControlNameTrue"
[formControlName]="'formControlName'"
[value]="true"
>
<label for="formControlNameTrue">FCN True</label>
</form>


However, I would like to use [formControl] instead:

<input
type="radio"
id="formControlTrue"
[formControl]="formControl"
[value]="true"
>
<label for="formControlTrue">FC True</label>


The problem is that, when using 2 or more radio buttons with the [formControl] approach, the template does not display the values of the controls properly. In the following screenshot, I have selected "FC True" and then "FC2 False" with my mouse. Both of these controls have been built using [formControl]. This is the result:



Please see the following stackblitz for the full code: https://stackblitz.com/edit/angular-3gbgbp.

Is there any way of creating a radio button with [formControl] only? If not, is this expected behavior or it could be a bug?

Continue reading...