32

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?

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

4 Answers 4

42

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;
}
3
  • 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. Jul 26, 2019 at 0:37
  • 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. Nov 1, 2019 at 7:14
  • 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.
    – GKhedekar
    May 19, 2022 at 4:10
34

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
2
  • Why would you use binding if value is static?
    – jmorc
    Oct 1, 2019 at 14:56
  • 1
    In this case, binding the constant value 1 makes the input value to be a number (instead of the string "1")
    – nelsonec87
    Dec 21, 2020 at 22:42
3
<label *ngFor="let status of statuses">
    <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
    <b>{{ status.name | i18n }}</b>
</label>
1
  • 6
    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?
    – LuFFy
    Aug 29, 2018 at 6:30
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.