Angular material multiple mat-radio-group with same name/field

Question

I am using angular material 7.

I am using radio-button-group.

I have a table design which i have to use. So that is fixed.

When i try to use radio-buttons in td, i am not sure hot to give same group.

below is my html.

<tr>
      <td>
        <mat-radio-group >
          <mat-radio-button value="maternal"></mat-radio-button>
        </mat-radio-group>
      </td>
      <td>
        <mat-radio-group >
          <mat-radio-button value="paternal"></mat-radio-button>
        </mat-radio-group>
      </td>
    </tr>

Here is stackblitz of my issue https://stackblitz.com/edit/angular-tt2kep-woea34.

If you have to use a table for the buttons, you could try surrounding the table in the mat-radio-group — , Apr 05 '19 at 12:14
Rows are in loop. So per row i need one value from that. So i can't surround table in mat-radio-group — Ankur Akvaliya, Apr 05 '19 at 12:17
That will break design completely And what if i have other controls in other td — Ankur Akvaliya, Apr 05 '19 at 12:20
Well if you can't have them as direct descendants, I don't think you can achieve this with the provided API. — , Apr 05 '19 at 12:27

score 0 · Answer 1 · answered Apr 05 '19 at 12:16

0

Use below code

    <table style="width:100%; text-align:left;">
  <thead>
    <th>Meternal</th>
    <th>Paternal</th>
  </thead>
  <tbody>
    <mat-radio-group >
    <tr>

      <td>

          <mat-radio-button value="maternal">Meternal</mat-radio-button>

      </td>
      <td>
          <mat-radio-button value="paternal">Peternal</mat-radio-button>

      </td>

    </tr>
    </mat-radio-group>
  </tbody>
</table>

answered Apr 05 '19 at 12:16

Er Abdul Meman

163
1
9

We can't break table like this. Try it in my stackblitz, it will break design completely. And what if i have some other controls in other td? – Ankur Akvaliya Apr 05 '19 at 12:18
I know brother but you are using different radio group so I think it's not possible to give two radio group to use a same value. I'' try to check another solution if possible – Er Abdul Meman Apr 05 '19 at 12:32

score 0 · Answer 2 · answered Apr 05 '19 at 19:33

0

We have this cool ngProjectAs to use on ng-container, which won't break your css. So we can project mat-radio-group for the container, which we wrap around tr:

<ng-container ngProjectAs="mat-radio-group">
  <tr>
    <td>
      <mat-radio-button value="maternal"></mat-radio-button>
    </td>
    <td>
      <mat-radio-button value="paternal"></mat-radio-button>
    </td>
  </tr>
</ng-container>

Your StackBlitz

answered Apr 05 '19 at 19:33

AT82

71,416
24
140
167

1

But can you bind the formControlName if you use ngProjectAs? How? – Emilie Dec 28 '19 at 19:16

score 0 · Answer 3 · answered Apr 05 '19 at 21:35

It is not mandatory that you use mat-radio-group. Instead, you can use the name input for mat-radio-button. The challenge then becomes how to access the 'group' value. For that you can manually manage the radio changes.

This example assumes some kind of data structure for your rows:

<table style="width:100%; text-align:left;">
  <thead>
    <th>Maternal</th>
    <th>Paternal</th>        
    <th>Value</th>
  </thead>
  <tbody>
    <ng-container *ngFor="let row of rows">
      <tr>
        <td>
            <mat-radio-button value="maternal" [name]="row" (change)="radioChange($event)" checked="true"></mat-radio-button>
        </td>
        <td>
            <mat-radio-button value="paternal" [name]="row" (change)="radioChange($event)"></mat-radio-button>
        </td>
        <td>
            {{ values[row].value }}
        </td>
      </tr>
    </ng-container>
  </tbody>
</table>

export class RadioOverviewExample {
  selectedValue:string="meternal";
  selectedValue1:string="meternal1";
  rows = ['one', 'two', 'three'];
  values = {};

  ngOnInit() {
    this.rows.forEach(row => {
      this.values[row] = { value: 'maternal' };
    })
  }

  radioChange(event) {
    this.values[event.source.name].value = event.value;
  }
}

https://stackblitz.com/edit/angular-tt2kep-h6pjiy?file=app%2Fradio-overview-example.html

Angular material multiple mat-radio-group with same name/field

3 Answers3