我从 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。
单选按钮的最初目的是选择一个工作字段集，其中所有元素都将启用，而所有其他字段集的内容将被禁用。