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.

mat-radio-group is not working

See original GitHub issue

Bug, feature request, or proposal:

<mat-radio-group formControlName='gender'>
    <mat-radio-button value='1'>Male</mat-radio-button>
    <mat-radio-button value='2'>Female</mat-radio-button>
</mat-radio-group>

This will not work with value of gender being 1, but will work with '1', no need to explain the difference between two, right?

Is this how you design it to be??

What is the expected behavior?

    <mat-radio-button value='1'>Male</mat-radio-button> 

To be selected.

What is the current behavior?

Nothing is selected

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

Include this in a reactive form (https://angular.io/guide/reactive-forms)

<mat-radio-group formControlName='gender'>
    <mat-radio-button value='1'>Male</mat-radio-button>
    <mat-radio-button value='2'>Female</mat-radio-button>
</mat-radio-group>

provide value for gender to be 1 (integer) not ‘1’ (string)

Then sit and watch it how it does nothing.

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

Look what you made me do:

// https://github.com/angular/material2/issues/10310
applicant = {...applicant, gender: applicant.gender.toString()};
this.form.patchValue(applicant);

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

  "dependencies": {
    "@angular/animations": "^5.2.7",
    "@angular/cdk": "^5.2.3",
    "@angular/common": "^5.2.7",
    "@angular/compiler": "^5.2.7",
    "@angular/core": "^5.2.7",
    "@angular/flex-layout": "^5.0.0-beta.13",
    "@angular/forms": "^5.2.7",
    "@angular/http": "^5.2.7",
    "@angular/material": "^5.2.3",
    "@angular/platform-browser": "^5.2.7",
    "@angular/platform-browser-dynamic": "^5.2.7",
    "@angular/router": "^5.2.7",
    "@ngrx/effects": "^5.1.0",
    "@ngrx/entity": "^5.1.0",
    "@ngrx/router-store": "^5.0.0",
    "@ngrx/store": "^5.1.0",
    "@ngrx/store-devtools": "^5.1.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "moment": "^2.20.1",
    "ngrx-actions": "^3.1.6",
    "rxjs": "^5.5.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "^5.2.7",
    "@angular/language-service": "^5.2.7",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.101",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "^2.7.2"
  }

Is there anything else we should know?

Sorry if the my tone is a bit harsh, but I am shocked by arrogance of an individual that goes by the handle @jelbourn, who decided to close #10310 for not following the template. I wonder if he didn’t have the energy to read five lines that were describing the situation pretty well, how he would read 300 lines in this ticket. Its amazing that Google has loose the ends of such people, but anyway whatever.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
jelbourncommented, Mar 7, 2018

@andreyan-andreev Please read Angular’s code of conduct and try to communicate more thoughtfully going forward. We appreciate issue reports, but the amount of disrespect in this issue is unacceptable. Enforcing use of the issue template is a standard for all of Angular, which is necessary to deal with the high volume of issues we receive.

Remember that we’re not just text on the internet, but real people doing our jobs.

4reactions
tinayuangaocommented, Mar 7, 2018

@andreyan-andreev This is working as intended.

value='1' means the value is a string. Use [value] to make the value accept a type other than string.

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular material mat-radio-button default checked not working ...
You will need the name="your_name" near [(ngModel)], then the checked property will not work but you can do like this.
Read more >
Radio button | Angular Material
Prefer placing all radio buttons inside of a <mat-radio-group> rather than creating standalone radio buttons because groups are easier to use exclusively with...
Read more >
mat-radio-button default checked in Angular mat-radio-group
To check mat-radio-button by default in Angular mat-radio-group, we need to use checked property.
Read more >
Angular Material radio buttons won't work when inside mat ...
Video of problem. This seems to only happen when I put them inside of a mat-radio-group but I thought I had to use...
Read more >
<mat-radio-button> in Angular Material - GeeksforGeeks
... Top 50 Graph Problems · Top 50 DP Problems · Contests · Sign In · Sign In · Home · Saved Videos...
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