question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Radios should have separate unique selection in different form containers

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Radio group controls with the same name should not correlate with each other if they belong to different forms.

What is the current behavior?

If you change value in one radio group, then the value will be unset for all the other radio groups with the same name in other forms

What are the steps to reproduce?

<form>
  <md-radio-group ngModel="Winter" name="season">
    <md-radio-button *ngFor="let season of seasons" [value]="season">
      {{season}}
    </md-radio-button>
  </md-radio-group>
</form>

Second form:

<form>
  <md-radio-group ngModel="Summer" name="season">
    <md-radio-button *ngFor="let season of seasons" [value]="season">
      {{season}}
    </md-radio-button>
  </md-radio-group>
</form>

Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: https://plnkr.co/edit/6xzFen4ayfMIv9JnYgW0?p=preview

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

Currently it’s impossible to implement a list (of similar items) if its items contain forms.

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

@angular/cli: 1.2.0 node: 8.0.0 os: win32 x64 @angular/animations: 4.3.1 @angular/cdk: 2.0.0-beta.8 @angular/common: 4.3.1 @angular/compiler: 4.3.1 @angular/core: 4.3.1 @angular/forms: 4.3.1 @angular/http: 4.3.1 @angular/material: 2.0.0-beta.8 @angular/platform-browser: 4.3.1 @angular/platform-browser-dynamic: 4.3.1 @angular/platform-server: 4.3.1 @angular/router: 4.3.1 @angular/cli: 1.2.0 @angular/compiler-cli: 4.3.1 @angular/language-service: 4.3.1

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:3
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
grizzm0commented, Jul 23, 2017

This is a limitation of Angular itself and not related to material2. Any input needs an unique name. See: https://angular.io/guide/forms#ngForm

0reactions
eliasrecommented, Aug 3, 2017

I can see that this is labeled a minor issue, but I hope it gets attention. I can’t see any elegant workarounds to this issue (don’t particularly want to rename values before submitting to server) and i dont want to use native radios…

(Hope I dont come across as to whiny or nagging). Keep up the good work on a beautiful framework 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to style radio buttons differently if they fit in a single row?
The first container doesn't have enough space to fit all the radio buttons in a single row. Therefore, they appear vertically as normal...
Read more >
Option to select which container is to be run - Alteryx Community
Radio Buttons can be tricky with multiple containers. The app solution involves using the Update Value with Formula in the Action tool.
Read more >
3 Different Ways to... Enable and Disable Tool Containers
This post sets out three different ways to change the behaviour of a tool container using a radio button in the app interface....
Read more >
Grouping Controls | Web Accessibility Initiative (WAI) - W3C
The <fieldset> element provides a container for related form controls, and the <legend> ... Radio button groups should always be grouped using <fieldset>...
Read more >
Bootstrap Radio - examples & tutorial
The singular property of a radio button makes it distinct from a checkbox. ... options in a list, while radios are for selecting...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found