CODEWITHSUNDEEP
angulardomradio-buttonchecked
MattTreichel
MattTreichel

Reputation: 1563

How is the checked property of a radio button set in Angular?

In the following screenshot of the DOM, I have a radio input. The selected value is determined by an Angular [(ngModel)] property. You can see here the model property matches the value property for this input, so I assumed that's how it's determined as checked.

But while this exact HTML scenario happened to me before and Angular did seem to process it as checked, after a recent change I can't discern, now the checked property doesn't actually return as true. Once I start selecting values, everything does work as expected, but it's setting it initially that doesn't seem to register even though it's reflected in the HTML.

How is the checked property actually determined by Angular? Is setting the ngModel to the value not enough?

Browser tool screenshot of DOM of Input/Label element

Upvotes: 0

Views: 2164

Answers (2)

MattTreichel
MattTreichel

Reputation: 1563

It's a bit of a sidestep, but I ended up implementing the radio/model connection in the following manual way, by removing [(ngModel)] and using checked and click binding.

Formerly, selectedAction was the value assigned to the [(ngModel]), but now actionIsSelected(action.id) is doing an equality check with a pre-initialized selectedAction in the controller, and it's reassigned on click event.

<input [id]="'action'+action.id" class="accessible" type="radio" required name="action" [value]="action.id" [checked]="actionIsSelected(action.id) ? 'true' : null" (click)="selectedAction = action.id">

Upvotes: 1

joshrathke
joshrathke

Reputation: 7774

After doing some quick scanning through the docs I found the RadioControlValueAccessor. Looks like Angular has a way built in.

I have also had luck using the following method for radio buttons and dropdowns. Although now I am tempted to try the RadioControlValueAccessor that is built in.

<input #radioButton type="radio" (change)="processChanges(#radioButton.value)">

This grabs the value on change and send it to the component for processing where you can update the Form Value.

Upvotes: 0

Related Questions