The "value" property on radio buttons with FormControl doesn't get updated

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] 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
[ ] Other... Please describe:

Current behavior

When I query a radio input element, for example: myRadioInput and check it’s value like myRadioInput.value I get “on” instead of the actual value from “value”

Expected behavior

I expect that myRadioInput.value will be the inputValue or the formControl.value I set on the component.

Minimal reproduction of the problem with instructions

In the following link:

1. Open the console
2. Click on the button
3. See that instead of “good” it shows “on”

https://stackblitz.com/edit/angular-reactive-forms-radio-value-bug

What is the motivation / use case for changing the behavior?

For testing purposes, I need to be able to click on a certain radio input to manually select it. that’s why it’s important to be able to compare the radio.value to the manually selected value.

Environment

Angular version: 6.1.8


Browser:
- [x] Chrome (desktop) version 68.0.3440.106
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[lazarljubenovic]

@ericmartinezr Value is a property too.

[NetanelBasal]

When you have an input with the same name as HTML property, Angular ignores it and treat it as input only.

The radio value accessor has a value input, and therefore when you add the formControlName, it ignores the value property.

You can see it easily in the following example:

@Directive({
  selector: '[srcIgnored]'
})
export class MyDirective { 
  @Input() src;
}

<img srcIgnored [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png'">

Remove the directive and see what’s happening.

This behavior makes sense, but I agree that the value should also be reflected on the property value as it works with the text input element.