Angular2: привязка к имени входного радио не работает

Question

В Angular2 односторонняя привязка к атрибуту name для группы радиовходов не работает. Например:

<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> 

При загрузке страницы имя не является атрибутом ни на одном из этих радиовходов.

Answer 1

Я предполагаю, что @Schippie написал правильно. Используйте

[attr.name]="name" 

вместо

[name]="name" 

(его Plunker было несколько проблем)

Plunker example

Answer 2

Если это работает как привязка к свойству select, свойство name будет установлено в элементе javascript dom. Значение, пока оно не отображается в представлении, которое фактически было установлено на элементе HTMLElement.

Что иллюстрирована следующим шлепнуть:

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

То, что вы на самом деле хотите сделать следующее:

[attr.name]="name"

Это позволит установить свойство на элемент.