Angular dynamic radio control and bootstrap 4

Question

I am having a little issue with my dynamic radio button control.

What is happening is I cant seem to be able to maintain the group so when one radio button is selected both become selected. Bootstrap requires the name field to be present but I am not sure if formControlName is what bootstrap looks for.

I have tried adding the name attribute to no avail and moving the FormGroup to the next div down.

This is the 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>

Here is the emitted 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>

Derviş Kayımbaşıoğlu Derviş Kayımbaşıoğlu · Accepted Answer · 2018-12-11T15:27:46

Edit: I am rephrasing my answer.

your radio button needs to have value directive which is needed to be binded to possible selection items like below:

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

name is for grouping value is for making radio button selected, and updating your model by using ngModel

Angular dynamic radio control and bootstrap 4

1 Answers