Search code examples
angularformsform-control

Angular 7 - ngbRadioGroup not working - No value accessor for form control with name

I'm following the documentation from NG-Bootstrap to add the ngbRadioGroup component, but I get the following error message: Error: No value accessor for form control with name: 'category'

I've actually pasted the same code from the documentation, but I'm still getting the same issue. I'm only including bootstrap css (not the js, jquery and popper) as asked in the NG-Bootstrap documentation.

This is the code I'm using

myForm = new FormGroup({
  category: new FormControl('')
});

<div class="btn-group btn-group-toggle d-flex flex-column mt-4" ngbRadioGroup name="radioBasic" formControlName="category">
    <label *ngFor="let cat of categories" ngbButtonLabel class="btn btn-outline-primary mb-2">
        <input ngbButton type="radio" [value]="cat.id" /> {{cat.displayName}}
    </label>
</div>

This is the expected result in terms of UI:

UI Category

Solution

  • For a start, just make sure NgbModule is imported:

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

    I assume you checked this: https://ng-bootstrap.github.io/#/components/buttons/examples. You might want to revisit again and view the example on StackBlitz to examine the code.