dab*_*cho 5 radio-button angular2-forms ng-bootstrap angular
我从 Angular 2 开始，目前使用的是 2.2.2 版
我正在编写一个响应式表单，但我无法初始化所选的单选按钮。该页面应加载并选中一个单选按钮，但这并未发生。
我一直无法找到问题的根源。从网络上的代码示例来看，我认为这应该有效。这是我的代码片段。
<form [formGroup]="consultaSolicitudesINETELForm" (ngSubmit)="consulta(consultaSolicitudesINETELForm)">
<input type="radio" formControlName="criterio" value="1" />
<input type="radio" formControlName="criterio" value="2" />
<input type="radio" formControlName="criterio" value="3" />
<input type="text" formControlName="folio" placeholder="folio" required>
</form>
对于组件
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
moduleId: module.id,
selector: 'my',
templateUrl: 'my.component.html',
styleUrls: ['my.component.css']
})
export class My implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit(): void {
this.buildForm();
}
buildForm(): void {
this.consultaSolicitudesINETELForm = this.fb.group({
criterio: ["2"],
folio: ["TEST"],
});
this.myForm.valueChanges.subscribe(data => this.onValueChanged(data));
this.onValueChanged();
}
编辑：
这是plnkr 我从一个例子中分叉出来的，我添加了不在我的环境中运行的无线电。我看到的唯一区别是版本号。
EDIT2：好的，我发现它与 ng-bootstrap 有关。如果我使用 NgbModule.forRoot() 那么单选按钮没有初始化并且不能按预期工作，如果我禁用 ng-bootstrap 那么它们可以工作，但是当我在其他地方使用 ng-bootstrap 时我不能这样做。
我通过使用 ng-bootstrap 自己的单选按钮组并重新设计网页来解决它。我将单选按钮放置在各种字段集的图例中，并且所有内容始终可见。现在收音机的工作方式有点像选项卡，根据当前选择显示不同的 div。
单选按钮的最初目的是选择一个工作字段集，其中所有元素都将被启用，而所有其他字段集的内容将被禁用。