Angular2：绑定到输入单选名称不起作用

Question

在 Angular2 中，单向绑定到一组无线电输入的名称属性不起作用。例如：

<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

如果这像绑定到 select 属性一样有效，名称属性将设置在 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"

这将在元素上设置属性。

Answer 2

我想@Schippie 写的是正确的。使用

[attr.name]="name"

而不是

[name]="name"

（他的 Plunker 有一些问题）

Plunker example

Angular2：绑定到输入单选名称不起作用

Angular2: binding to input radio name doesn't work

angular2-forms

angular