Two-way binding not working in ng-bootstrap switch in angular reactive form

Question

I am developing an application with Angular 4, Bootstrap 4 and ngbootstrap. Html code -

<div class="container">
  <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)">
    <div class="form-group">
      <div class="row">
        <legend class="col-form-legend col-sm-2">Required</legend>
        <div class="btn-group col-sm-2" ngbRadioGroup name="isRequired" formControlName="isRequired">
          <label ngbButtonLabel class="btn-primary">
            <input ngbButton type="radio" name="radio" [value]="true">Yes
          </label>
          <label ngbButtonLabel class="btn-primary">
            <input ngbButton type="radio" name="radio" [value]="false">No
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-6">
        <button type="submit" class="btn btn-info">
          <i class="fa fa-floppy-o fa-lg"></i>
          Save
        </button>
      </div>
    </div>  
  </form>
</div>

Controller

 private buildForm() {
    this.myForm = this.formBuilder.group({
      isRequired: [],
    });
  }

In the controller's ngOnInit () element, I call the buildForm () method. Then I make an Http get request and get the value for the isRequired field. If the selection is successful, I call the following method to set the value of the switch.

private loadFormData() {
    this.myForm.patchValue({
      isRequired: this.variable.isRequired,
    });
}

Problem. Suppose the value isRequired = true. This value gets correctly, and the radio gets initialized with this value on top of the form load. However, if the user changes the value (isRequired = false), the field still retains the previous value (isRequired = true).

This works fine if I use the following code -

<div class="form-group">
    <div class="row">
      <legend class="col-form-legend col-sm-2">Required</legend>
      <input type="radio" formControlName="isRequired" value="true"> Yes
      <input type="radio" formControlName="isRequired" value="false"> No
    </div>
</div>

What am I doing wrong?

Answer 1

, popper.js ng-bootstrap .

.

Answer 2

User changes flow from the DOM elements to the form model, not to the data model. The form controls never update the data model.

, , this.variable.isRequired . , this.myForm.value, ngModel , ng-bootstrap buttons.