title: Two way binding not working in ng-bootstrap radio button in an angular reactive form
body: <p>I am developing an application with Angular 4, Bootstrap 4 and ngbootstrap. The html code - </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)"&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="row"&gt;
          &lt;legend class="col-form-legend col-sm-2"&gt;Required&lt;/legend&gt;
          &lt;div class="btn-group col-sm-2" ngbRadioGroup name="isRequired" formControlName="isRequired"&gt;
            &lt;label ngbButtonLabel class="btn-primary"&gt;
              &lt;input ngbButton type="radio" name="radio" [value]="true"&gt;Yes
            &lt;/label&gt;
            &lt;label ngbButtonLabel class="btn-primary"&gt;
              &lt;input ngbButton type="radio" name="radio" [value]="false"&gt;No
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;button type="submit" class="btn btn-info"&gt;
            &lt;i class="fa fa-floppy-o fa-lg"&gt;&lt;/i&gt;
            Save
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The controller  </p>
  
  <pre><code> private buildForm() {
      this.myForm = this.formBuilder.group({
        isRequired: [],
      });
    }
  </code></pre>
  
  <p>In the ngOnInit() hook of the controller I call the buildForm() method. Then I make a Http get request and fetch a value for the isRequired field. If the fetch is successful I call the following method to set the value of the radio button.</p>
  
  <pre><code>private loadFormData() {
      this.myForm.patchValue({
        isRequired: this.variable.isRequired,
      });
  }
  </code></pre>
  
  <blockquote>
    <p>The problem -  Lets assume the value of isRequired = true. This value
    gets fetched properly and the radio gets initialized with this value
    on form load. However, if the user changes the value (isRequired =
    false) the field still retains the previous value (isRequired = true).</p>
  </blockquote>
  
  <p>This works fine if I use the following code -</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;div class="row"&gt;
        &lt;legend class="col-form-legend col-sm-2"&gt;Required&lt;/legend&gt;
        &lt;input type="radio" formControlName="isRequired" value="true"&gt; Yes
        &lt;input type="radio" formControlName="isRequired" value="false"&gt; No
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>