Weird problem with forms / radio buttons and arrow navigation using Angular and Template Driven Forms

I have a weird problem with one of my forms. I am using Template Driven Forms in Angular, and as soon as I want bind the selected value of radio buttons in a form via ngModel the navigation between the radio buttons and radio button groups via arrow keys and tab key stop working.

Without the ngModel Attribute I can jump from one radio button group to another using Tab. And in one radio button group I can use the arrow keys to select a specific option. I also cannot leave a radio button group using arrow keys. That's all the way as it's supposed to be.

But when I add ngModel then suddenly I can't use the tab key anymore to jump between radio button groups and the arrow up and down keys are no longer trapped in one specific radio button group (Using Chrome Browser. Firefox also changes behaviour but in a different and also wrong way).

You can check it for yourself using the follow StackBlitz projects: Without ngModel: https://stackblitz.com/edit/stackblitz-starters-bwkfamcz?file=src%2Fapp%2Fform%2Fform.html

With ngModel: https://stackblitz.com/edit/stackblitz-starters-fnptjpbf?file=src%2Fapp%2Fform%2Fform.html

Has anyone of you any idea, what is going on here?

Thanks in advance.

You should raise a Github issue to know why this happens, could be an accessibility issue.

I know that ngModel internally uses name attribute to bind to the form. So I guess it is interfering with how the HTML is initialized.

We can add [attr.name] and [name] property to solve this issue. One is used by HTML (attr.name) and the other (name) is used by ngModel.

<form (ngSubmit)="onSubmit()">
  @for(question of questions; track question; let i = $index) {
    <p>{{ question.text }}</p>

    @for(option of question.options;track option;let iInner = $index) {
      <input
        type="radio"
        [tabindex]="1"
        [id]="'question' + iInner"
        [name]="'question' + i"
        [attr.name]="'question' + i"
        [value]="option"
        ngModel
      />
      <label [for]="'question' + iInner"> {{ option }} </label>
    }

    <hr />
  }
  <button type="submit">Submit</button>
</form>

Stackblitz Demo