Angular 2 radio button does not initialize correctly with reactive form

Question

I start with Angular 2 and am currently using version 2.2.2

I am writing a reactive form, but I cannot initialize the selected switch. The page should load with the selected radio button, but this does not happen.

I could not find the source of the problem. From the code examples on the Internet, I think this should work. Here is a snippet of my code.

<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>

for component

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

}

EDIT:   Here is the one plnkrI was looking from an example when I added a radio that does not start in my environment. The only difference I see there is the version numbers.

EDIT2: , , - ng-bootstrap. NgbModule.forRoot(), , ng-bootstrap, , ng-bootstrap , .

, ng-bootstrap -. , , . , div .

, , .

Answer 1

ng-bootstrap https://github.com/ng-bootstrap/ng-bootstrap/issues/1125

.