使用API​​绑定数据绑定单选按钮

Question

我创建了一个表单来获取保存在数据库中的用户的性别，性别发布为radioButton。该值正确发送到数据库，我也可以检索它。我只想检查相应的单选按钮。这是我的.html代码。

<div class="form-group col-lg-6" ngbRadioGroup>
  <!-- Gender -->
  <label for="">Gender</label>
  <label ngbButtonLabel class="btn-primary customButtons" >
    <input ngbButton type="radio" value="male" formControlName="gender"> Male
  </label>
  <label ngbButtonLabel class="btn-primary customButtons">
  <input ngbButton type="radio" value="female" formControlName="gender" >Female
  </label>
</div>

在我的.ts文件中，我通常输入以下内容，如果输入是文本框，则它可以正常工作：

this.form.controls['gender'].setValue(this.influencer.gender);

提前致谢。

Answer 1

与文档类似：​​https://ng-bootstrap.github.io/#/components/buttons/examples

formControlName将在使用ngbRadioGroup的元素上设置，而不是在每个单独的单选按钮上设置，因此请将代码更改为：

 

<div class="form-group col-lg-6" ngbRadioGroup formControlName="gender">
  <!-- Gender -->
  <label for="">Gender</label>
  <label ngbButtonLabel class="btn-primary customButtons" >
    <input ngbButton type="radio" value="male"> Male
  </label>
  <label ngbButtonLabel class="btn-primary customButtons">
     <input ngbButton type="radio" value="female">Female
  </label>
</div>