In Angular2, one-way binding to the name attribute for a group of radio inputs doesn't work. For example:
<div [ngFormModel]="form">
<input type="radio" [name]="varName" [id]="id1" ngControl="r1">
<input type="radio" [name]="varName" [id]="id2" ngControl="r2">
<input type="radio" [name]="varName" [id]="id3" ngControl="r3">
</div>
When loading the page, name is not an attribute on any of those radio inputs.
I guess what @Schippie wrote was correct. Use
[attr.name]="name"
instead of
[name]="name"
(his Plunker had a few issues)
[name]="variable" works on some elements in some conditions yet not always. So it seems much saver to always use [attr.name]. If you want it to show up on the element as wellhtmlFor of the label element) don't have the same name as the attribute (for) they are reflected to. What is caused by Angular is that sometimes there are directives applied to elements that have an input with the same name as attributes, but these are not reflected to the attributes without using [attr.name], but that is for performance reasons. Updating attributes is expensive because they change the DOM and can even cause rerendering.If this works anything like the binding to the select property the name property will be set on the javascript dom element. Meaning while it does not display within the view it actually has been set on the HTMLElement.
Which is illustrated with the following plunk:
import {Component} from '@angular/core'
import {ControlGroup, Control} from '@angular/common'
@Component({
selector: 'my-app',
providers: [],
template: `
<form [ngFormModel]="group">
<input type="radio" [attr.name]="name" ngControl="test">
<input type="radio" [attr.name]="name" ngControl="test2" ref-example>
<input type="radio" [name]="name" ngControl="test3" ref-exampletwo>
<p>using [attr.name]: {{example.name | json }}</p>
<p>using [name]: {{exampletwo.name | json }}</p>
</form>
`
})
export class App {
name: "test"
group: ControlGroup
constructor() {
this.group = new ControlGroup({
test: new Control(""),
test2: new Control(""),
test3: new Control("")
})
}
}
http://plnkr.co/edit/xHkgb0BgPzZLwyFpTo1W?p=preview
What you actually want to do is the following:
[attr.name]="name"
This will set the property on the element.
FORM_DIRECTIVES and FORM_PROVIDERS are globally available and don't need to be provided. ... in directives and providers is redundant. Why do you inject FormBuilder but then use new ControlGroup(...). Just use `formBuilder.group(...)´ instead.