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?
Radio buttons usually fit an enum type best.
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.
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.
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.
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;
}
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
<label *ngFor="let status of statuses">
<input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
<b>{{ status.name | i18n }}</b>
</label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With