4

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>

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

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

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.

Chris
  • 483
  • 1
  • 5
  • 18
  • I recreated this problem in Plunker: http://plnkr.co/edit/smYCv6UE7fv3KvlGuA9t?p=preview. You're right, `id` changes to a color, but `for` does not change. I believe this is a bug. – shmck Jun 25 '15 at 07:41
  • If other people find the same issue, without any clear solution, then you may consider posting it as [an issue](https://github.com/angular/angular/issues). – shmck Jun 25 '15 at 07:48
  • The problem in label-for is another one. When binding the value of the Control to another part of the dom, you can see, that it never changes: http://plnkr.co/edit/JO79R2f0tAReP1SORFGQ?p=preview – Chris Jun 25 '15 at 08:02
  • To get the Label For working, you need to bind it like that `[attr.for]="colour.text"` http://plnkr.co/edit/JO79R2f0tAReP1SORFGQ?p=preview but that still doesn't solve the binding of the radio-buttons – Chris Jun 29 '15 at 06:15
  • 1
    Saw this question when looking into the problem that a radiobutton is not checked even when the ngModel is set right. I found a solution on http://stackoverflow.com/a/34677489/2087214 That answer might help you too. – bas Feb 04 '16 at 11:59
  • Possible duplicate of [Angular2 - Radio Button Binding](http://stackoverflow.com/questions/31879497/angular2-radio-button-binding) – Jigar Feb 18 '16 at 03:39

1 Answers1

1

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

Chris
  • 483
  • 1
  • 5
  • 18