Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How correctly bind data to radio buttons in Angular2?

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?

like image 491
Seva Avatar asked Mar 29 '17 13:03

Seva


People also ask

Which data type is used for radio button?

Radio buttons usually fit an enum type best.

How are radio buttons implemented?

To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag. While using <label> isn't strictly necessary, it's considered a best practice for two reasons.

How do I group radio buttons?

You group radio buttons by drawing them inside a container such as a Panel control, a GroupBox control, or a form. All radio buttons that are added directly to a form become one group. To add separate groups, you must place them inside panels or group boxes.

Which attribute is used to make a group of radio buttons?

We can put different radio buttons in a group using the name attribute. All the buttons in a group must have the same name attribute.


3 Answers

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;
}
like image 155
Seva Avatar answered Oct 17 '22 05:10

Seva


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
like image 30
shivam srivastava Avatar answered Oct 17 '22 05:10

shivam srivastava


<label *ngFor="let status of statuses">
    <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
    <b>{{ status.name | i18n }}</b>
</label>
like image 3
Voodoo Savage Avatar answered Oct 17 '22 06:10

Voodoo Savage