无法让 ngx-bootstrap radio 工作,没有值访问器
Can't get ngx-bootstrap radio to work, No value accessor
这让我很困惑。我在这里几乎使用了 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,
....
],
这是我得到的错误:
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)
有什么想法吗?
我已经弄明白了。我所要做的就是将它添加到顶部的 app.module.ts 中:
import { ButtonsModule } from 'ngx-bootstrap';
这在我的导入中:
imports: [
....
FormsModule,
ReactiveFormsModule,
ButtonsModule,
....
]
这让我很困惑。我在这里几乎使用了 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,
....
],
这是我得到的错误:
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)
有什么想法吗?
我已经弄明白了。我所要做的就是将它添加到顶部的 app.module.ts 中:
import { ButtonsModule } from 'ngx-bootstrap';
这在我的导入中:
imports: [
....
FormsModule,
ReactiveFormsModule,
ButtonsModule,
....
]