Angular2 - Radio Button Binding

Question

I want to use radio button in a form using Angular 2

Options : <br/>

1 : <input name="options" ng-control="options" type="radio" value="1"  [(ng-model)]="model.options" ><br/>

2 : <input name="options" ng-control="options" type="radio" value="2" [(ng-model)]="model.options" ><br/>

model.options initial value is 1

when the page is loaded the first radio button isn't checked and the modifications aren't binded to the model

Any Idea ?

Answer 1

As much as this answer might not be the best depending on your use case, it works. Instead of using the Radio button for a Male and Female selection, using the <select> </select> works perfectly, both for saving and editing.

<select formControlName="gender" name="gender" class="">
  <option value="M">Male</option>
  <option value="F">Female</option>
</select>

The above should do just fine, for editing using FormGroup with patchValue. For creating, you could use [(ngModel)] instead of the formControlName. Still works.

The plumbing work involved with the radio button one, I chose to go with the select instead. Visually and UX-wise, it doesn't appear to be the best, but from a developer's standpoint, it's a ton easier.

Answer 2

The following fixed my issue, please consider adding radio input inside the form tag and use the [value] tag to display the value.

<form name="form" (ngSubmit)="">
    <div *ngFor="let item of options">
        <input [(ngModel)]="model.option_id" type="radio" name="options" [value]="item.id"> &nbsp; {{ item.name }}
    </div>
</form>