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?

ngModel and checked do not work together , you must remove one of them . — Arash
– Arash, Commented Nov 8, 2017 at 13:37

Amirhossein Mehrvarzi · Accepted Answer · 2020-07-08 14:27:45Z

43

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;
}

edited Jul 8, 2020 at 14:27

Amirhossein Mehrvarzi

19.1k7 gold badges52 silver badges74 bronze badges

answered Mar 30, 2017 at 9:26

user6408649

1,3053 gold badges17 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Hill Over a year ago

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.

John Gilmer Over a year ago

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.

GKhedekar Over a year ago

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.

Deepak · Accepted Answer · 2020-11-21 22:29:59Z

36

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

edited Nov 21, 2020 at 22:29

Deepak

2,7522 gold badges13 silver badges31 bronze badges

answered Feb 7, 2018 at 11:10

shivam srivastava

4605 silver badges9 bronze badges

2 Comments

jmorc Over a year ago

Why would you use binding if value is static?

nelsonec87 Over a year ago

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

Voodoo Savage · Accepted Answer · 2018-08-29 04:06:20Z

3

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

answered Aug 29, 2018 at 4:06

Voodoo Savage

313 bronze badges

1 Comment

LuFFy Over a year ago

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?

Dova · Accepted Answer · 2020-01-14 04:14:44Z

0

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>

answered Jan 14, 2020 at 4:14

Dova

912 bronze badges

Collectives™ on Stack Overflow

How correctly bind data to radio buttons in Angular2?

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Linked

Related