双向绑定在ng-bootstrap单选按钮中不起作用，呈角反应形式 [英] Two way binding not working in ng-bootstrap radio button in an angular reactive form

问题描述

我正在使用Angular 4，Bootstrap 4和ngbootstrap开发应用程序. html代码-

I am developing an application with Angular 4, Bootstrap 4 and ngbootstrap. The 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>

控制器

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

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

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.

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

问题-让我们假设isRequired = true的值.这个值 正确获取，并使用此值初始化无线电 加载表格时.但是，如果用户更改值(isRequired = false)，该字段仍保留先前的值(isRequired = true).

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

如果我使用以下代码，这会很好-

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>

我在做什么错了?

推荐答案

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

I realized that this problem is caused by popper.js The official documentation of ng-bootstrap strongly advises against including it.

请在此处阅读提供的文档.

这篇关于双向绑定在ng-bootstrap单选按钮中不起作用，呈角反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！