Angular Radio Button Deselects when NgValue Changes

Question

I have a group of radio buttons that are required in the form. One of the radio buttons has an option to type in a custom value. If I select this radio button and begin typing in the custom value, then the radio button is deselected. How do I fix this?

<div ng-controller="MyCtrl">
    <form>
        <input type="radio" value="red" ng-model="color" ng-required="!color">red</input>
        <input type="radio" value="blue" ng-model="color" ng-required="!color">blue</input>
        <input type="radio" ng-value="field" ng-model="color" ng-required="!color">Other:</input>
        <input type="text" ng-model="field"></input>
    </form>
</div>

Jsfiddle here.

Manish Kr. Shukla Manish Kr. Shukla · Accepted Answer · 2014-12-01T05:30:58

As stated in the official docs of AngularJS for input type radio

ngValue : Angular expression which sets the value to which the expression should be set when selected.

Hence, as soon as you change the modal variable that is assigned in the ngValue attribute, it automatically deselects the radio button, so that when it's selected again, the value in the expression assigned to ngValue can be assigned to radio button.

Hence, you can monitor the changes in the textbox and set the value for the modal variable on every key hit..

HTML :

    <input type="radio" value="{{field}}" ng-model="color" ng-required="!color">Other:</input>
    <input  ng-change="checkState()" type="text" ng-model="field"></input>

JS:

    $scope.checkState = function() {
        $scope.color = $scope.field;
    };

Updated plunker here

Angular Radio Button Deselects when NgValue Changes

1 Answers