Components: mat-radio-group is not working

Created on 7 Mar 2018  路  5Comments  路  Source: angular/components

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.

Most helpful comment

@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.

All 5 comments

@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.

I apologise to you for taking it personal, I just got surprised from the god-like attitude that you demonstrated, we are also not just texts on the internet. I spend the time to write something that in my opinion is not working as it should, it was a simple matter, with or without template was clearly understandable. You could very well answer that this is the desired behaviour and that would be fine with me.

@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.

Thanks.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

LoganDupont picture LoganDupont  路  3Comments

crutchcorn picture crutchcorn  路  3Comments

shlomiassaf picture shlomiassaf  路  3Comments

theunreal picture theunreal  路  3Comments

MurhafSousli picture MurhafSousli  路  3Comments