Angular 2 单选按钮未使用响应式(Reactive)表单正确初始化

Question

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

我正在写一个响应式表单，但我无法初始化选定的单选按钮。该页面应加载并选中一个单选按钮，但并未发生这种情况。

我一直找不到问题的根源。从 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 我从一个例子中派生出来的，在这个例子中我添加了不在我的环境中运行的 radio 。我看到的唯一区别是版本号。

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

我通过使用 ng-bootstrap 自己的单选按钮组并重新设计网页来解决这个问题。我将单选按钮放置在各种字段集的图例中，并且所有内容始终可见。现在 radio 的工作方式有点像选项卡，根据当前选择显示不同的 div。

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

Answer 1

此问题与 ng-bootstrap 有关，并在 https://github.com/ng-bootstrap/ng-bootstrap/issues/1125 进行了跟踪

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