angular: Binding to [name] on radio inputs does not provide browser-default tab interaction

@adharris Thanks for reporting! Radio buttons are intended to be used with name or [name], but you’re correct that the normal name attribute isn’t mirrored. Using both name and [attr.name] is the workaround for now, but it’s confusing and not great for accessibility. The form control directives should handle the attribute mirroring for you. We’ll put it on the list.

@matod You’ll want to use formControlName if it’s part of the parent form or formControl if you’d like a standalone control that isn’t registered. The plunker appears to try to mix those by using formControl and also registering it. Worth noting that you’ll need to bind to [name] if you want the selection to work properly for both cases (and as mentioned above, also [attr.name] if you want the tab stops to work correctly).

Im having the same problem. When using dynamic binding of [name] the name attribute is not rendered in the dom. But the name attribute is necessary for browser autocomplete / remembering input data. Using [name] and [attr.name] together seems to be a workaround.

I want to add that this behavior depends on how you build the app.

I’ve noticed that if you turn off optimization in angular.json, then Angular will set the name property. If you turn on optimization, then Angular will not set the name property anymore.

As a workaround, you can create a new directive with the selector of ‘input[name]’ as follows:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: 'input[name]'
})
export class NameAttrFixDirective {

  @Input() name: string;

  constructor(private element: ElementRef) {

  }

  ngOnInit(){
    this.element.nativeElement.setAttribute('name', this.name);
  }
}

This should add a name attribute in Dom to the respective element.

Thanks; I actually just tried binding to both [name] and [attr.name] at the same time, and it appears to be working as I expect; If this is the intended solution this can be closed, and I’ll update the original so it shows up in searches. Seems weird to need to bind to both though.