Label for md-radio-group

[AbakumovAlexandr]

Bug, feature request, or proposal:

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

What is the expected behavior?

We need some built-in means to add labels (probably, not only for md-radio-group) when needed.

What is the current behavior?

There is no built-in way to give a label to a md-radio-group. You have to add, lay out and style HTML label, span or div by yourself.

What are the steps to reproduce?

Using a sample layout:

<label>Sort by</label>
<md-radio-group>
    <md-radio-button value="1">Date</md-radio-button>
    <md-radio-button value="2">Status</md-radio-button>
    <md-radio-button value="3">From</md-radio-button>
    <md-radio-button value="4">To</md-radio-button>
</md-radio-group>

Leads to an un-styled label:

What is the use-case or motivation for changing an existing behavior?

Many times we want to label a md-radio-group, but don't have built-in means to do so.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "2.0.0-beta.11"

[leocaseiro]

Perhaps if we implement #7891, it'll work for radio-group as well.

[leocaseiro]

A quick solution for that, is using a mat-list and the [mat-subheader], like so:

<mat-list>
    <h3 mat-subheader>Label for RadioGroup</h3>
    <mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
    <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
      {{season}}
    </mat-radio-button>
  </mat-radio-group>
</mat-list>

Eq: https://plnkr.co/edit/k73FSy?p=preview

PS: You might need some style for your mat-radio-group and mat-radio-button.

.example-radio-group {
  display: inline-flex;
  flex-direction: column;
}

.example-radio-button {
  margin: 5px 16px;
}

[marcusportmann]

I had the same problem and created a simple component that leverages the functionality provided by the MatFormField component.

You can use it like this:

<radio-group-form-field>
  <mat-label>Favorite Color</mat-label>
  <mat-radio-group formControlName="favoriteColor" required="true">
    <mat-radio-button value="1">Red</mat-radio-button>
    <mat-radio-button value="2">Green</mat-radio-button>
    <mat-radio-button value="3">Blue</mat-radio-button>
  </mat-radio-group>
  <mat-hint>The favorite color hint</mat-hint>
  <mat-error *ngIf="testForm.controls['favoriteColor'].errors && !testForm.controls['favoriteColor'].untouched">
    <span *ngIf="testForm.controls['favoriteColor'].errors?.required">A favorite color is required.</span>
  </mat-error>
</radio-group-form-field>

radio-group-form-field.ts.txt

[mindscratch]

@marcusportmann anyone use the radio-group-form-field in angular 11? I'm trying to resolve the incompatibilities myself. I've gotten close(?)...currently getting:

ERROR TypeError: Cannot read property 'errorState' of undefined
    at MatFormField_HostBindings (form-field.js:824)
    at definition.hostBindings (core.js:12380)
    at processHostBindingOpCodes (core.js:8947)

[donroyco]

@marcusportmann anyone use the radio-group-form-field in angular 11? I'm trying to resolve the incompatibilities myself. I've gotten close(?)...currently getting:

ERROR TypeError: Cannot read property 'errorState' of undefined
    at MatFormField_HostBindings (form-field.js:824)
    at definition.hostBindings (core.js:12380)
    at processHostBindingOpCodes (core.js:8947)

Please do not use this issue for problems or bugs. File a new bug via the issue template or use Stack Overflow to get an answer to your problem.

[mindscratch]

check out a newer version: https://github.com/marcusportmann/inception/tree/master/src/inception-angular/projects/ngx-inception/src/lib/core/components

[jelbourn]

Closing this since I don't see us adding support for this feature. It's not something that's really visually captured in the material design spec explicitly. Not implementing something here means that you can add the style of label that best suits your app.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}