ecmascript-6 - ng-control 和带有 angular2 的单选按钮的双向绑定(bind)

Question

我目前正在尝试 Angular2 (Alpha 27) 的 FormBuilder 和 ControlBindings (ng-control)。我正在尝试将一些 RadioButtons 与 ng-control 绑定(bind)，但我无法让它工作。

我的 Controller 包含我的表单的以下代码:

this.colours = [{text:"red"}, {text:"green"}, {text:"blue"}];
this.myForm = builder.group({
    someText: [""],
    someColour: ["blue"]
});

在我看来，我尝试了以下操作:

<p *ng-for="var colour of colours">
    <input id="{{colour.text}}" name="someColour" type="radio"
    ng-control="someColour"
    [checked]="myForm.controls.someColour.value == colour.text">
            <label for="{{colour.text}}">{{colour.text}}</label>
</p>

问题似乎是，ng-control 在我的每个单选按钮上设置了 someColor 的预定义值。单击其他 RadioButtons 之一有效，但绑定(bind)值不会更改。这样绑定(bind)到我的 ng-control 值的标签将永远不会显示除预定义值“blue”之外的其他值。

希望任何人都可以使用 ng-control 解决这个问题。

P.S.:我知道我可以将 RadioButton 绑定(bind)到我的 Controller 的属性并通过 ClickBinding 更改值，但这不是我正在寻找的解决方案。

Answer 1

随着时间的流逝，Angular2 现在有了一个 RadioControlValueAccessor，所以现在可以使用了。为此甚至还有一个 angular-material2 组件。