Skip to content

Reactive Forms require both [name] and [attr.name] for radio buttons to work correctly with [formControl] #45719

Open
@MattTreichelYeah

Description

@MattTreichelYeah

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

I have three minimal example variations of two sets of radio buttons on one page, with each set having its own [formControl] provided. In this scenario both sets of radios have the same values.

Unideal Working Example:

https://stackblitz.com/edit/angular-ivy-qf7yke?file=src%2Fapp%2Fapp.component.html
In this example it works as intended, but both [name] and [attr.name] are required.

Failing Example 1:

https://stackblitz.com/edit/angular-ivy-f16c7a?file=src%2Fapp%2Fapp.component.html
If only [attr.name] is provided, both radio buttons end up mirroring each other's control. The underlying form model is correct, but the "template model" is displayed incorrectly due to this mirroring.

Failing Example 2:

https://stackblitz.com/edit/angular-ivy-oyycqj?file=src%2Fapp%2Fapp.component.html
If only [name] is provided, it seems to work as intended, but because no attribute is attached to the HTML, the browser can't group the radio buttons, and keyboard controls work incorrectly. Tabbing only goes to the first group, skipping the second group, and arrow keys scroll through all the radio buttons on the page instead of being restricted to the correct group.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

@angular/animations
12.2.5
@angular/common
12.2.5
@angular/compiler
12.2.5
@angular/core
12.2.5
@angular/forms
12.2.5
@angular/platform-browser
12.2.5
@angular/platform-browser-dynamic
12.2.5
@angular/router
12.2.5
rxjs
7.3.0
tslib
2.3.1
zone.js
0.11.4

Anything else?

It seems like the easy solution here would be that [name] should be inserting an attribute into the HTML similar to [id].

formControlName appears to avoid these issues for some reason, but I can't use formControlName in my real-life scenario - I need to be able to pass the formControl itself through component layers.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: formsbug

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions