Can't get ngx-bootstrap radio to work, No value accessor

Question

This has been driving me up the wall. I am pretty much using the example from the ngx-bootstrap manual here: https://valor-software.com/ngx-bootstrap/#/buttons#radio-reactiveforms and it is not working. Here are my template and component:

Template:

<pre class="card card-block card-header">{{ myForm.value | json }}</pre>
<form [formGroup]="myForm" class="form-inline">
  <div class="form-group">
    <div class="btn-group" btnRadioGroup formControlName="radio">
      <label btnRadio="A" class="btn btn-primary">A</label>
      <label btnRadio="B" class="btn btn-primary">B</label>
      <label btnRadio="C" class="btn btn-primary">C</label>
    </div>
  </div>
</form>

Component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'demo-buttons-radio-reactiveforms',
  templateUrl: './keyed-payment.component.html',
  styleUrls: ['./keyed-payment.component.scss']
})
export class KeyedPaymentComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      radio: 'C'
    });
  }
}

In addition I have also added the following to my app.module.ts:

import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

and in the imports array:

imports: [
   ....
   FormsModule,
   ReactiveFormsModule,
   ....
],

This is the error that i get:

ERROR Error: No value accessor for form control with name: 'radio' at _throwError (forms.js:2432) at setUpControl (forms.js:2302) at FormGroupDirective.addControl (forms.js:6658) at FormControlName._setUpControl (forms.js:7308) at FormControlName.ngOnChanges (forms.js:7221) at checkAndUpdateDirectiveInline (core.js:12365) at checkAndUpdateNodeInline (core.js:13893) at checkAndUpdateNode (core.js:13836) at debugCheckAndUpdateNode (core.js:14729) at debugCheckDirectivesFn (core.js:14670)

Any ideas?

Answer 1

I've figured it out. All I had to do was add this to my app.module.ts at the top:

import { ButtonsModule } from 'ngx-bootstrap';

and this in my Imports:

imports: [
    ....
    FormsModule,
    ReactiveFormsModule,
    ButtonsModule,
    ....
]