Model won't update in Angular 2 radio list

Question

I'm trying to build a Angular 2 component which displays a list of options with radios. It works fine but it the answer field of the component, which is bound inside [(ng-model)]="answer", won't update when selecting one of the options. Am I doing something wrong or isn't this the way to create a list of radio selection options?

  <div>
    Answer: {{ answer }}
  </div>
  <div class="radio" *ng-for="#option of itemData">
      <label>
          <input type="radio" [value]="option.id" [(ng-model)]="answer"
                 (change)="responseChanged()" name="radio-list">
          <span>{{ option.name }}</span>
      </label>
  </div>

Plunker

Here's a [custom implementation](https://github.com/barbatus/ng2-pipes/blob/master/client/lib/radio_value_accessor.ts) for radio, don't know about lists though. — Eric Martinez, Oct 27 '15 at 20:50

score 6 · Accepted Answer · edited Mar 31 '21 at 08:09

6

Well i guess two way binding is now working with radio, so currently you cannot use [(ng-model)].

The alternative is to use the change event and checked attribute. See my plunker

https://plnkr.co/edit/7Zm3qgoSv22Y9KrBn4tS?p=preview

(change)="answer=$event.target.value"

and

[checked]='answer==option.id'

edited Mar 31 '21 at 08:09

Syscall

19,327
10
37
52

answered Oct 27 '15 at 14:16

Chandermani

42,589
12
85
88

I was assuming this too :) I wonder if there's a way to build this kind of radio list using the Control class inside the Component. – lucassp Oct 27 '15 at 18:40
Well, it looks like there are other issues related to properties being bound to the view: `setAnswer(e) { this.items[e.index].answer = e.answer; // e.answer = "b" console.log(this.items[e.index]); // the "answer" field of the object is undefined }` – lucassp Oct 27 '15 at 19:43
OK, property bindings, `[item-data]='item'`, send a reference down the component tree, to which the 'answer' is set to an empty string by [(ng-model)] and this is what makes the top level component's `setAnswer` handler show the answer field as undefined after it's being updated in the line above. – lucassp Oct 27 '15 at 20:00
Using Beta 16 and this solution still works. Thanks! – tctc91 May 19 '16 at 09:51

pleerock · Answer 2 · 2016-06-16T20:41:20.107

You cannot use ng-model with radio boxes like in angular1. However there are several components on github that allows you to do it easily, like ng2-radio-group component. It has support for both radio select and multiple checkboxes select:

<radio-group [(ngModel)]="sortBy">
    <input type="radio" value="rating"> Rating<br/>
    <input type="radio" value="date"> Date<br/>
    <input type="radio" value="watches"> Watch count<br/>
    <input type="radio" value="comments"> Comment count<br/>
</radio-group>


<checkbox-group [(ngModel)]="orderBy">
    <input type="checkbox" value="rating"> Rating<br/>
    <input type="checkbox" value="date"> Date<br/>
    <input type="checkbox" value="watches"> Watch count<br/>
    <input type="checkbox" value="comments"> Comment count<br/>
</checkbox-group>

Model won't update in Angular 2 radio list

2 Answers2

Linked