Angular 2 单选按钮未使用反应式表单正确初始化

Question

我从 Angular 2 开始，目前使用的是版本 2.2.2

我正在编写反应式表单，但无法初始化 selected 单选按钮。该页面应加载一个单选按钮 selected，但这并没有发生。

我一直找不到问题的根源。从 Web 上的代码示例来看，我认为这应该可行。这是我的代码片段。

<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();

}

编辑： Here 是一个 plnkr 我从我在我的环境中添加了不运行的无线电的例子中派生出来的。我看到的唯一区别是版本号。

编辑2：好的，我发现它与ng-bootstrap有关。如果我使用 NgbModule.forRoot() 那么单选按钮没有初始化并且不能按预期工作，如果我禁用 ng-bootstrap 然后它们工作，但是当我使用 ng-bootstrap在其他地方我做不到。

我通过使用 ng-bootstrap 自己的单选按钮组并重新设计网页来绕过它。我将单选按钮放置在各种字段集的图例中，并且所有内容始终可见。现在收音机的工作方式有点像标签，根据当前 selection 显示不同的 div。

单选按钮的最初用途是 select 一个工作字段集，其中它的所有元素都将被启用，所有其他字段集的内容被禁用。

Answer 1

此问题与 ng-bootstrap 相关，已在 https://github.com/ng-bootstrap/ng-bootstrap/issues/1125

进行跟踪

这对他们来说是高优先级的。

Angular 2 单选按钮未使用反应式表单正确初始化

Angular 2 Radio Button not Initializing Correctly with Reactive Form

radio-button

angular2-forms

ng-bootstrap

angular