radio buttons group binding not working as expected

Question

i have a simple data grid where edit button is clicked and i navigate to a form that has the properties populated. one of the property is "accountStatus" that has 2 possible values "Active" and "InActive" so at a given time one of the radio buttons is selected. i have html setup like this

  <label for="accountStatus">Account Status is {{bankAccount.accountStatus}}</label>

                <input
                type="radio"
                name="accountStatus"
                id="accountStatus-1"
                [value]="Active"
                [(ngModel)]="bankAccount.accountStatus"


              />
              <input
                type="radio"
                name="accountStatus"
                id="accountStatus-2"
                [value]="InActive"
                [(ngModel)]="bankAccount.accountStatus"                            
              />

when i navigate from grid to edit page the * {{bankAccount.accountStatus}} * has proper value. but based of that radio buttons are not checked. my ideas is that if [value] == [(ngModel)] the radio buttons should be selected.

as you can see the "InActive" is what is showing up in Label but inactive radio (the one one the right) is not checked.

Mike S. Mike S. · Accepted Answer · 2020-05-26T11:30:21

Use value="Active"instead of [value]="Active"

The latter means that you're trying to bind value to a property Active, which doesn't exist. You simply want to bind value to a string, therefore you need to omit the []

radio buttons group binding not working as expected

1 Answers