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

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/app/form/form.html

With ngModel: https://stackblitz.com/edit/stackblitz-starters-fnptjpbf?file=src/app/form/form.html

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

Thanks in advance.

Continue reading...