无法让 ngx-bootstrap 收音机工作，没有值访问器答案

【问题标题】：Can't get ngx-bootstrap radio to work, No value accessor无法让 ngx-bootstrap 收音机工作，没有值访问器
【发布时间】：2018-03-01 00:53:11
【问题描述】：

这一直把我逼到绝境。我在这里使用了 ngx-bootstrap 手册中的示例：https://valor-software.com/ngx-bootstrap/#/buttons#radio-reactiveforms，但它不起作用。这是我的模板和组件：

模板：

<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>

组件：

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'
    });
  }
}

此外，我还在 app.module.ts 中添加了以下内容：

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

在导入数组中：

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

这是我得到的错误：

错误错误：没有名称的表单控件的值访问器：'radio' 在 _throwError (forms.js:2432) 在 setUpControl (forms.js:2302) 在 FormGroupDirective.addControl (forms.js:6658) 在 FormControlName._setUpControl (forms.js:7308) 在 FormControlName.ngOnChanges (forms.js:7221) 在 checkAndUpdateDirectiveInline (core.js:12365) 在 checkAndUpdateNodeInline (core.js:13893) 在 checkAndUpdateNode (core.js:13836) 在 debugCheckAndUpdateNode (core.js:14729) 在 debugCheckDirectivesFn (core.js:14670)

有什么想法吗？

【问题讨论】：

您是否在app.module.ts 的declarations 数组中声明了btnRadioGroup？
您使用的是哪个版本的 ngx-bootstrap？ btnRadioGroup 已添加到最新版本之一中。
@ArjunPanicker 不，我没有，你能告诉我导入语句的样子吗？
@IlyaSurmay 这就是我的 package.json 文件中的内容："ngx-bootstrap": "^2.0.2" 如果可以相信的话。
@ArjunPanicker 感谢您的提示，这就是让我找到答案的原因。我为“btnRadioGroup”获取代码库并在我的节点模块中找到它，然后检查它存在的文件/文件夹并发现 ButtonsModule 导出。

标签： angular angular-reactive-forms ngx-bootstrap

【解决方案1】：

我想通了。我所要做的就是将它添加到我的 app.module.ts 的顶部：

import { ButtonsModule } from 'ngx-bootstrap';

这在我的导入中：

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

【讨论】：

我面临着类似的事情。您将其添加到顶部是什么意思？你的意思是说ButtonsModule 必须是imports 或任何特定的顺序？
我很难说出我的意思，因为这篇文章已经超过 2 年了，而且我不再在 Angular 中工作了。也就是说，我怀疑 import 语句应该在文件顶部的某个地方，也应该在 import 数组中。我不认为顺序很重要，但我可能是错的。