Twitter bootstrap 双向绑定在ng引导单选按钮中不起作用，呈角度反应形式

我正在用Angular 4、Bootstrap 4和ngbootstrap开发一个应用程序。html代码-

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

在控制器的ngOnInit（）钩子中，我调用buildForm（）方法。然后，我发出一个Http get请求并获取isRequired字段的值。如果获取成功，我将调用以下方法来设置单选按钮的值

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

问题-让我们假设isRequired=true的值。此值 正确获取并使用此值初始化收音机 在表单上加载。但是，如果用户更改了值（需要= false）该字段仍保留以前的值（isRequired=true）

如果我使用下面的代码，这就可以了-

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

要求的
对
不

我做错了什么？

根据反应式表单指南

用户将流程从DOM元素更改为表单模型，而不是数据模型。表单控件从不更新数据模型。

这意味着当用户从收音机中选择任何值时，您的变量

this.variable.isRequired

不会得到更新。要获取表单值，您必须使用

this.myForm.value

或者您必须在收音机上使用

ngModel

，如中所述

根据反应形式指南

用户将流程从DOM元素更改为表单模型，而不是数据模型。表单控件从不更新数据模型。

---

这意味着当用户从收音机中选择任何值时，您的变量

this.variable.isRequired

不会得到更新。要获取表单值，您必须使用

this.myForm.value

或者您必须在收音机上使用

ngModel

，如中所述

我意识到这个问题是由popper.js引起的 ng bootstrap的官方文档强烈建议不要将其包括在内

---

请阅读提供的文档。

我意识到这个问题是由popper.js引起的 ng bootstrap的官方文档强烈建议不要将其包括在内

---

请阅读提供的文档。

@ranakrunal9。我正在遵循这个链接-->@ranakrunal9上显示的被动表单单选按钮示例。下面是反应式表单单选按钮示例，如此链接所示-->此变量是从数据库中获取的对象，它包含单选按钮的初始值。保存表单时，我正在检查myForm.value.isRequired。是否可以同时使用ngModel和formControlName？this.variable是从数据库获取的对象，它包含单选按钮的初始值。保存表单时，我正在检查myForm.value.isRequired。是否可以同时使用ngModel和formControlName？

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