Angular reactive forms radio button group

Question

Form Control for Radio Group with same name

The below is the code of component

    bedsArray: Array<{displayText: string, bed: number}> = [];
    roomCount = 3; // This is not fixed.
    roomForm: FormGroup;

    ngOnInit() { 
    this.bedsArray.push({bed: 1, displayText: '1 Bed'});
    this.bedsArray.push({bed: 2, displayText: '2 Beds'});
    this.bedsArray.push({bed: 3, displayText: '3 Beds'});

    this.roomForm = new FormGroup({
      rooms: this.genRoomArray(),
      buildingName: new FormControl('Building 1')
    });
    }

    genRoomArray(): FormArray {
    const roomsArray = new FormArray([]);
    for(let i = 0; i < this.roomCount; i++) {
      const roomGroup = new FormGroup({
        roomNo: new FormControl('', Validators.required),
        bedsCount: new FormControl('', Validators.required)
      });

      roomsArray.push(roomGroup);
    }
    return roomsArray;
    }

and the code for the template

<form [formGroup]="roomForm">
  <h3> {{ roomForm.get('buildingName').value }} Rooms </h3>
  <div class="rooms" formArrayName="rooms">
    <div class="room" style="padding: 2rem; border:1px solid gray; margin- 
      bottom:1rem;" *ngFor="let room of roomForm.get('rooms').controls" 
      [formGroup] = "room">
         Room Number: <input type="text" formControlName="roomNo"> 
         <div class="beds">
            <div class="bed" *ngFor="let bed of bedsArray" [formGroup] = "room">
            <input [value] = "bed.bed" name="bedsCount" formControlName="bedsCount" type="radio">       
            {{ bed.displayText }}
       </div>
     </div>
    </div>
   </div>
  </form>

The radio buttons doesn't work as expected. Only one radio button gets selected.

The html name should be different for the radio buttons to work correctly. How do I do that.

Demo

Answer 1

So your template is aaaaalmost alright, we need a dynamic id instead of name, so do the following small changes (in comment) also stripped away noise just for the answer :

<form [formGroup]="roomForm">
  <div formArrayName="rooms">
    <div *ngFor="let room of roomForm.get('rooms').controls" [formGroup]="room">
     Room Number: <input type="text" formControlName="roomNo"> 
     <!-- You can remove formgroup from below div --> 
     <!-- add index so we have a dynamic index for id -->
      <div *ngFor="let bed of bedsArray; let i = index">
        <input [value]="bed.bed" [id]="i" formControlName="bedsCount" type="radio">
        {{ bed.displayText }}
     </div>
    </div>
  </div>
</form>

DEMO