Search code examples
javascriptweb-componentangular

Model won't update in Angular 2 radio list

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

Solution

  • 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'