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

You are missing `name` attribute and `[value]` in your radio button. But, I don't think you even want a formarray here? Now you are pushing a new formgroup for all possibilites, I guess you just want a single value. — AT82, Feb 02 '19 at 14:23
I have added those now.. It's still the same. I need the formArray because there are multiple room displayed in one page. the code i have given above will come inside an another loop — rahul_shinde11, Feb 02 '19 at 14:27
[html example](https://codepen.io/anon/pen/ZwKvov) This is what i am looking for. How do I do this kind of radio buttons in reactive forms. I know that the name has to differ for each radio group. — rahul_shinde11, Feb 02 '19 at 14:40

AT82 · Accepted Answer · 2019-02-02T18:07:32.073

2

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

edited Feb 02 '19 at 18:07

answered Feb 02 '19 at 14:31

AT82

71,416
24
140
167

Thank you for the answer. although, this is not what i am looking for. There are multiple room displayed in one page so i will have to use the form array. https://codepen.io/anon/pen/ZwKvov is what i am looking for. – rahul_shinde11 Feb 02 '19 at 14:44
1

Then show a [mcve], there is not enough code to recreate the issue, you are not showing the build of the form or the whole minimal template to recreate the issue. Take the stackblitz and recreate the issue there with your code and I'm glad to help! – AT82 Feb 02 '19 at 14:52
The same example which you have done. Just the possibility for multiple rooms in a single form. – rahul_shinde11 Feb 02 '19 at 14:57
Yes, I know what you mean, and I could do it for you, but please make an effort yourself. `I want this, do it for me` isn't what StackOverflow is for ;) I rather look at your code, explain what is wrong and in that way help you. – AT82 Feb 02 '19 at 15:00
I have modified the entire question and attached a demo. Kindly help me with the my code. – rahul_shinde11 Feb 02 '19 at 17:16
@user3768472 Great demo! I couldn't find any issue now, but that you had forgotten `[value]="bed.bed"` from your radio button. seems to work now, right? https://stackblitz.com/edit/angular-iedpqv?file=src/app/hello.component.html – AT82 Feb 02 '19 at 17:24
No, I need to select one radio button for each group. But in this case i am able to select only one radio button for the entire form. – rahul_shinde11 Feb 02 '19 at 17:29
@user3768472 Oh, shoot, didn't notice that, just checked the value, which is applied correctly to form. I'll investigate further :D – AT82 Feb 02 '19 at 17:32
Thank you. I will be looking forward to your reply. – rahul_shinde11 Feb 02 '19 at 17:36
@rahul_shinde11 NOOOOOW I think I fixed it... use dynamic `id` instead https://stackblitz.com/edit/angular-5cbcps?file=src/app/hello.component.html – AT82 Feb 02 '19 at 17:58
Omg!! That's it. I never thought of id. I see that you also have removed the name. Thank you so much. – rahul_shinde11 Feb 02 '19 at 18:04
No problem, great that you made a demo, very helpful! Updated my answer with the correct answer now :) Yes, we had to use `id` instead of name, because name was blocking and just allowing one option be chosen in whole array. – AT82 Feb 02 '19 at 18:10

Angular reactive forms radio button group

Form Control for Radio Group with same name

1 Answers1

Linked