Why won't a [(ngModel)] of a radio group bind?

Question

I'm using ng-bootstrap ngbRadioGroup as follows:

<div>
  <label>Deductible:</label>
  <div class="radio-group" [(ngModel)]="transaction.isDeductible" ngbRadioGroup name="isDeductible">
    <label class="btn btn-secondary"><input type="radio" [value]="true">Yes</label>
    <label class="btn btn-secondary"><input type="radio" [value]="false">No</label>
  </div>
</div>

Unfortunately, selecting one of the options does not set the transaction.isDeductible property.

What could be the problem?

Thanks in advance for any insights, let me know if I could provide additional relevant information :)

EDIT:

Might be worth nothing this happens with two more RadioGroups, i provided the simplest one here

Answer 1

For me, removing the ../node_modules/bootstrap/dist/js/bootstrap.js line from angular-cli.json scripts include fixed the issue. Obviously this isn't a fix for everyone if you need Bootstrap JavaScript!

So there must be a conflict between ng-bootstrap and the Bootstrap JavaScript. I don't have the time to look into it at the moment, maybe someone else could? I may comeback to this if I need to use it.

Answer 2

Without seeing your module for imports and your component it is hard to know for sure what might be wrong, but usually when I had issues with two-way data-binding it was because I forgot to import FormsModule or forgot the name field on an input.

I have pasted your code in as-is to a Plunkr and confirmed that it is working, which shows that the template syntax is accurate and that your example has not provided enough definitive information to provide the correct answer - but you should be able to reference the component and module imports to confirm you have everything you need.

http://plnkr.co/edit/vHeyjHiHjawMLNiNXXk3?p=preview