Угловое динамическое радиоуправление и бутстрап 4

Question

У меня небольшая проблема с динамическим управлением радиокнопками.

Происходит то, что я не могу поддерживать группу, поэтому при выборе одной радиокнопки оба становятся выбранными.Bootstrap требует наличия поля имени, но я не уверен, что для начальной загрузки используется 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