两种方式绑定在 angular 反应形式的 ng-bootstrap 单选按钮中不起作用

Question

我正在使用 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>

控制器

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

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

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

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

如果我使用以下代码就可以正常工作 -

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

我做错了什么？

Answer 1

根据 The data model and the form model 响应式表单指南

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

这意味着当用户 select 来自无线电的任何值时，您的变量 this.variable.isRequired 不会更新。要获得表单值，您必须使用 this.myForm.value 或您必须在无线电上使用 ngModel，如 ng-bootstrap buttons 中所述。

Answer 2

我意识到这个问题是由popper.js引起的 ng-bootstrap 的官方文档强烈建议不要包含它。

请阅读提供的文档 here。

两种方式绑定在 angular 反应形式的 ng-bootstrap 单选按钮中不起作用

Two way binding not working in ng-bootstrap radio button in an angular reactive form

twitter-bootstrap

bootstrap-4

ng-bootstrap

angular

angular-reactive-forms