Question

我的动态单选按钮控件存在一些问题。

正在发生的事情是我似乎无法维护该组，因此当选中一个单选按钮时，两个都被选中。 Bootstrap要求显示name字段，但是我不确定formControlName是否是引导程序要查找的内容。

我尝试将name属性添加为无效，然后将FormGroup移至下一个div。

这是radio-component.html

<div class="form-group row" [formGroup]="group">
 <label for="{{field.name}}" class="col-sm-2 col-form-label">{{field.label}}</label>
 <div class="custom-control custom-radio custom-control-inline col-sm-1" *ngFor="let answer of field.options">
  <input type="radio" id="{{answer+field.id}}" [formControlName]="field.name" class="custom-control-input">
  <label class="custom-control-label" for="{{answer+field.id}}">{{answer}}</label>
 </div>
</div>

这是发出的html。

<app-radio _nghost-c4="">
 <div _ngcontent-c4="" class="form-group row ng-valid ng-dirty ng-touched" ng-reflect-form="[object Object]">
  <label _ngcontent-c4="" class="col-sm-2 col-form-label" for="gender">Gender</label><!--bindings={
"ng-reflect-ng-for-of": "Male,Female"}-->
<div _ngcontent-c4="" class="custom-control custom-radio custom-control-inline col-sm-1">
 <input _ngcontent-c4="" class="custom-control-input ng-valid ng-dirty ng-touched" type="radio" ng-reflect-form-control-name="gender" ng-reflect-name="gender" id="radio_0">
 <label _ngcontent-c4="" class="custom-control-label" for="radio_0">Male</label>
  </div>
  <div _ngcontent-c4="" class="custom-control custom-radio custom-control-inline col-sm-1">
  <input _ngcontent-c4="" class="custom-control-input ng-valid ng-dirty ng-touched" type="radio" ng-reflect-form-control-name="gender" ng-reflect-name="gender" id="radio_1">
  <label _ngcontent-c4="" class="custom-control-label" for="radio_1">Female</label>
  </div>
 </div>
</app-radio>

Answer 1

编辑：我正在改写我的答案。

您的单选按钮需要具有value指令，该指令需要绑定到可能的选择项，如下所示：

<input type="radio" value="male" name="gender" [ngModel]="user.gender" > Male
<input type="radio" value="female" name="gender" [ngModel]="user.gender" > Female

name用于分组 value用于选择单选按钮，并使用ngModel

更新模型

角度动态无线电控制和自举4

1 个答案: