bug(MatRadioGroup): MatRadioButton sometimes not checked initially when using a FormControl

[lancehalberd]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Recently while migrating to Reactive Forms, I encountered a very mysterious interaction where seemingly unrelated changes to my template were causing a Radio Group to not show the initial value as checked. Initially I thought it was just the presence of *ngIf="..." on the mat-radio-button, but after trying to reproduce I found it was somewhat more subtle than that and seems to require another mat-radio-group in some specific arrangement to trigger the problem.

I was eventually able to reliably reproduce the error by including a specific element before radio group, which you can see in the stackblitz example, although presumably there are other ways to trigger the issue. For example, in my attached example, the issue only occurs if the broken radio group is placed after the container, but when I originally produced this issue, it did not seem to matter where in the template I placed the broken radio group.

I found a work around to resolve the issue for the time being, if I use [value]="'value'" instead of value="value" the component once again works as expected, which you can see in the "Fixed Radio Group" in the stackblitz example. Even with this fix, I hope we can identify the underlying issue because it seems tricky enough that other developers could run into it and it may be causing other problems beyond what I'm observing here.

https://stackblitz.com/edit/angular-ivy-ntbc1n?file=src%2Fapp%2Fapp.component.html,angular.json,src%2Fstyles.css,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts

Reproduction

Steps to reproduce:

1. Visit https://stackblitz.com/edit/angular-ivy-ntbc1n?file=src%2Fapp%2Fapp.component.html,angular.json,src%2Fstyles.css,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts
2. Notice that although the "Broken" and "Fixed" Radio Group both use nearly identical code, the "Broken" radio group has no checked option initially, but the "Fixed" Radio Group works as expected.
3. Try modifying the template to observe how sensitive this issue is to seemingly unrelated context. For example:
4. Removing *ngIf="true" from the broken radio group option A will fix the issue.
5. Removing *ngIf="true" from the ngContainer around "Some Mode" Radio Group will fix the issue.
6. Deleting the "Some Mode" Radio Group (while leaving the container) will fix the issue.

Expected Behavior

The Radio Button that matches the initial value in the FormControl should be selected initially, and the state of seemingly unrelated elements should have no impact on this.

Actual Behavior

No Radio Button is initially checked in the "Broken Radio Group" example, despite using code that seems like it should be functionally identical to the "Fixed Radio Group", which is working as expected.

Environment

• Angular: 14.2.6
• CDK/Material: 14.2.5
• Browser(s): Chrome 106.0.5249.119
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}