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,
    });
}

问题 - 让我们假设isRequired = true的值。这个值正确获取并使用此值初始化无线电在表格上加载。但是，如果用户更改了值（isRequired = 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>

我做错了什么？

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.

这意味着当用户从广播中选择任何值时，您的变量this.variable.isRequired不会得到更新。要获得表单价值，您必须使用this.myForm.value，或者必须按照ng-bootstrap buttons中的说明在广播中使用ngModel。

Answer 2

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

请阅读提供的文档here。

双向绑定不能在角度反应形式的ng-bootstrap单选按钮中工作

2 个答案: