Repository: angular
Issue: Reactive Forms rules for name and formControlName matching causes conflicts with radio sets in different FormGroup/FormArray sections
Labels: area: forms,P4

# 🐞 bug report

### Affected Package
The issue is caused by package @angular/forms

### Is this a regression?
No

### Description
When using Reactive Forms and radio buttons, an error is logged indicating that the `name` and `formControlName` attributes must match, even for radios inside of `FormGroup` or `FormArray`.

Following this rule causes the HTML form to treat *all* radio buttons with the same property name as part of the same radio set, even those in distinct FormGroups or FormArray elements.

## 🔬 Minimal Reproduction
This example demonstrates behavior when following the rule that name and formControlName must match for radio buttons:
https://stackblitz.com/edit/angular-ivy-sa7e9m?devtoolsheight=33&file=src/app/app.component.html

**Expected:** The `type` radio buttons oustide of the `meta` FormGroup should be in a different set than the `type` radio buttons in the `meta` FormGroup, such independent selections can be made in each set. No errors are logged.
**Actual:** The radio buttons are in the same set since they have the same name, such that if the user selects a `type` radio in the `meta` FormGroup than it de-selects all `type` radios outside of the `meta` FormGroup and vice versa. No errors are logged.

**Expected:** Each book in the `books` FormArray should have an independent set of `status` radio buttons, such that independent selections can be made for each book. No errors are logged.
**Actual:** The radio buttons for all books are in the same set since they have the same name, such that if the user selects a `status` radio in one book then the form de-selects all `status` radios for all other books. No errors are logged.

---

This example demonstrates behavior when *not* following the rule that name and formControlName must match for radio buttons, trying to set unique names for each set of radios:
https://stackblitz.com/edit/angular-ivy-mmods7?devtoolsheight=33&file=src/app/app.component.html

**Expected:** The `type` radio buttons oustide of the `meta` FormGroup should be in a different set than the `type` radio buttons in the `meta` FormGroup, such independent selections can be made in each set. No errors are logged.
**Actual:** The form behavior works as expected, including the value of the submitted form. Errors are logged (see below).

**Expected:** Each book in the `books` FormArray should have an independent set of `status` radio buttons, such that independent selections can be made for each book. No errors are logged.
**Actual:** Radios in each book are not given the interpolated `name` value. Both radios for each book can be selected simultaneously. Errors are logged (see below).
## 🔥 Exception or Error
```
Error:
If you define both a name and a formControlName attribute on your radio button, their values
must match. Ex: <input type="radio" formControlName="food" name="food">
```


## 🌍  Your Environment

**Angular Version:**
<pre><code>
10.0.9
</code></pre>

**Anything else relevant?**
This was previously raised in #23319 with an attempted fix in #23727.