Radio buttons do not become unchecked when a bound ngModel property is removed

[pmulac]

Consider the following radio group:

<md-radio-group  [ngModel]="model.accountType" ngControl="accountType">
    <md-radio-button value="I">Individual</md-radio-button>
    <md-radio-button value="J">Joint</md-radio-button>
</md-radio-group>

And then the ngModel object changes like so:

Original state: {accountType: 'J'}
New state: {}

I would expect the corresponding radio button ('Joint') to be unchecked. However, the 'Joint' radio button remains checked, which does not represent the true state of the control.

As a workaround, I'm able to bind to the md-radio-checked class on each button, which removes the checked state of a radio button when the corresponding binding changes to undefined.

<md-radio-group  [ngModel]="model.accountType" ngControl="accountType">
    <md-radio-button value="I" [class.md-radio-checked]="model.accountType === 'I'">Individual</md-radio-button>
    <md-radio-button value="J" [class.md-radio-checked]="model.accountType === 'J'">Joint</md-radio-button>
</md-radio-group>

This is especially important for a redux/ngrx application, in which you would expect radio buttons to become checked/unchecked as you replay recorded actions.

[lobo-tuerto]

I'm observing the same behavior with reactive forms :(

[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.}