How correctly bind data to radio buttons in Angular2?

Question

I have a component with two radio buttons, HTML looks like :

<div class="btn-group"  id="ProfitCodes">
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           id="point1"
           name="ProfitCode"><small>description</small>
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           [checked]="model.ForeignCompany.ProfitCode === 2"
           value="2"
           id="point2"
           name="ProfitCode"><small>description</small>
    </label>
</div>

When I click save and send model to server I see valid selected value of radio button on server side. And this value stored in the database without errors. But radio button with appropriate value is not checked after binding data. In devTools I see the first radio button:

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point1" name="ProfitCode" title="asdasda" type="radio" value="1" ng-reflect-name="ProfitCode" ng-reflect-value="1" ng-reflect-model="2" ng-reflect-checked="false">

Second radio button:

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point2" name="ProfitCode" title="asd" type="radio" value="2" ng-reflect-name="ProfitCode" ng-reflect-value="2" ng-reflect-model="2" ng-reflect-checked="true">

I see that angular changed attributes and waiting that second radio button will be checked. But this does not happen. What am I doing wrong?

Ramekin

ngModel and checked do not work together , you must remove one of them . – Miniaturize

Answer 1

This works in my case. I removed [(ngModel)]

<div class="radio">
<label>
    <input type="radio"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           id="point1"
           (change)="onProfitSelectionChange(1)"
           name="ProfitCode"><small>description</small>
</label>
</div>
<div class="radio">
    <label>
        <input type="radio"
               value="2"
               [checked]="model.ForeignCompany.ProfitCode === 2"
               id="point2"
               (change)="onProfitSelectionChange(2)"
               name="ProfitCode"><small>description</small>
    </label>
</div>

and TS method looks like:

onProfitSelectionChange(entry): void {
    this.model.ForeignCompany.ProfitCode = entry;
}

Ramekin

You can also listen for the change event on a wrapper div for all the radio buttons. The value of the change is then accessible as $event.target.value. This saves repeating the (change) listener for every radio button. – Awhirl

I tried a bunch of different ways to get the radio button to bind directly to the data source using ngModel (like I do for checkboxes), but none of the ways worked for me, so I had to use an event handler. – Citrange

hey can you check this question? this is not woking for me, rather i have been searching for answers since last 3 days, my question is there unanswered since 2 days. – Forevermore

Answer 2

You don't need [checked]. Try with [(ngModel)]. Also, use [value]="1" instead of value="1"

  <input type="radio" name="Coverage" [value]="1" 
    [(ngModel)]="formdata.coverage_verified"  />Yes

Masticate

Why would you use binding if value is static? – Athwartships

In this case, binding the constant value 1 makes the input value to be a number (instead of the string "1") – Yukyukaghir

Answer 3

<label *ngFor="let status of statuses">
    <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
    <b>{{ status.name | i18n }}</b>
</label>

Rhyolite

While your code may correct as answer But Elaborating what your code does, It can improve the quality of your answer. Checkout the Article : How do I write a good answer? – Magnificence

Answer 4

Try it.

<ng-container *ngFor="let type of types">
   <label class="m-radio m-radio--bold m-radio--state-success">
      <input name="selectedType" [(ngModel)]="selectedType" [value]="type" type="radio">
           {{type.title}}
      <span></span>
   </label>
</ng-container>

Thenar