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>

加载页面时，name不是任何这些无线电输入的属性。

Answer 1

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

[attr.name]="name"

而不是

[name]="name"

（他的Plunker有几个问题）

Plunker example

Answer 2

如果这与绑定到select属性的工作方式类似，则会在javascript dom元素上设置name属性。在视图中未显示的含义实际上已在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"

这将在元素上设置属性。

Angular2：绑定到输入无线电名称不起作用

2 个答案: