单向按钮与角度2的ng控制和双向绑定 [英] ng-control and two-way binding on radio buttons with angular2

问题描述

我正在尝试Angular2（Alpha 27）的FormBuilder和ControlBindings（ng-control）。我试图绑定一些RadioButton与ng控件，但我不能让它工作。

I'm currently trying the FormBuilder and ControlBindings (ng-control) of Angular2 (Alpha 27). I'm trying to bind some RadioButtons with the ng-control, but i can't get it to work.

我的控制器包含以下我的表单代码：

My Controller contains following Code for my Form:

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

在我看来，我尝试以下：

On my view i tried following:

<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设置预定义的我的每个单选按钮都有一些颜色。点击其他一个RadioButtons工作，但绑定值不会更改。因此，绑定到我的ng控件的值的标签永远不会显示比预定值蓝色更多的值。

The problem seems to be, that ng-control sets the predefined value of someColor on every one of my radio-buttons. A click on one of the other RadioButtons works, but the bound Value is not changed. So that a label bound to the value of my ng-control will never show another value, than the predefinied value "blue".

希望有人有解决方案，使用ng-control。

Hope anyone has a Solution for this, using ng-control.

PS：我知道我可以将RadioButton绑定到我的Controller的属性，并通过ClickBinding更改值，但这不是我的解决方案寻找。

P.S.: I know i can bind the RadioButton to a property of my Controller and Change the value by ClickBinding, but that's not the solution i'm looking for.

推荐答案

随着时间的流逝，Angular2现在有一个RadioControlValueAccessor，所以现在工作。
这个甚至还有一个angular-material2组件。

As time flew by, Angular2 now has a RadioControlValueAccessor, so this works now. There's even an angular-material2 component for this.

这篇关于单向按钮与角度2的ng控制和双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！