Ngx-bootstrap: btnRadio throwing no value accessor for form control

Created on 15 Feb 2017  路  4Comments  路  Source: valor-software/ngx-bootstrap

I have an angular 2 v 2.4.0 project and I am trying to implement the ng2-bootstrap radio buttons. my implementation is:

<form [formGroup]="abilityForm" novalidate (ngSubmit)="onSubmit(abilityForm)">
<div class="btn-group">
                <label class="btn btn-primary" [(ngModel)]="model.CostExhaust" btnRadio="true" name="CostExhaust" formControlName="CostExhaust" value="true">Yes</label>
                <label class="btn btn-primary" [(ngModel)]="model.CostExhaust" btnRadio="false" name="CostExhaust" formControlName="CostExhaust" value="false">No</label>
            </div>
</form>

but I am getting the following:

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:12973/Areas/Cards/Scripts/Angular2/CardModule/CreateCard/AbilitiesComponent/create-ability.component.html:51:47 caused by: No value accessor for form control with name: 'CostExhaust'
Error: Error in http://localhost:12973/Areas/Cards/Scripts/Angular2/CardModule/CreateCard/AbilitiesComponent/create-ability.component.html:51:47 caused by: No value accessor for form control with name: 'CostExhaust'
    at ViewWrappedError.ZoneAwareError (http://localhost:12973/node_modules/zone.js/dist/zone.js:811:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:1239:20)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:1297:20)
    at new ViewWrappedError (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:6165:20)
    at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:12383:27)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:12356:22)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:12191:22)
    at CompiledTemplate.proxyViewClass.View_CreateCardComponent0.detectChangesInternal (/CreateCardModule/CreateCardComponent/component.ngfactory.js:57:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:12206:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:12353:48)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:12191:22)
    at CompiledTemplate.proxyViewClass.View_CreateCardComponent_Host0.detectChangesInternal (/CreateCardModule/CreateCardComponent/host.ngfactory.js:29:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:12206:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:12353:48)
    at ViewRef_.detectChanges (http://localhost:12973/node_modules/@angular/core/bundles/core.umd.js:9375:24)

any thoughts?

comp(buttons) question

Most helpful comment

I had the same problem. Then I realized that I had forgotten to add ButtonsModule.forRoot() to my ngModule. Problem solved! Wanted to add my solution here in case someone else has the same problem.

All 4 comments

is forms module imported?

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ButtonsModule } from 'ng2-bootstrap';

are specified in my module

Show me your ngmodule

I had the same problem. Then I realized that I had forgotten to add ButtonsModule.forRoot() to my ngModule. Problem solved! Wanted to add my solution here in case someone else has the same problem.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ravirajhalli picture ravirajhalli  路  3Comments

PascalHonegger picture PascalHonegger  路  3Comments

MihaiHoriaPopescu picture MihaiHoriaPopescu  路  3Comments

ctrl-brk picture ctrl-brk  路  3Comments

webdev48 picture webdev48  路  3Comments