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

查看：33
本文介绍了双向绑定在角度反应形式的 ng-bootstrap 单选按钮中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)"><div class="form-group"><div class="row"><legend class="col-form-legend col-sm-2">必需</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">是<label ngbButtonLabel class="btn-primary"><input ngbButton type="radio" name="radio" [value]="false">否

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

</表单>

控制器

 私有 buildForm() {this.myForm = this.formBuilder.group({是必须的: []，});}

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

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

<块引用>

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

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

<div class="row"><legend class="col-form-legend col-sm-2">必需</legend><input type="radio" formControlName="isRequired" value="true">是的<input type="radio" formControlName="isRequired" value="false">不

我做错了什么?

解决方案

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

请阅读此处提供的文档.

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>

The controller 

 private buildForm() {
    this.myForm = this.formBuilder.group({
      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,
    });
}

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>

What am I doing wrong?

解决方案

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

Please read the documentation provided here.

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆