CODEWITHSUNDEEP
javascriptangularjs
Duck_dragon
Duck_dragon

Reputation: 450

AngularJS Check and get value of radio button

I just started learning angular and trying to implement basic things. I made 3 radio buttons and respective controller for it. What I am trying to do is check if radio button is selected or not and get that selected value and pass it to another controller(can be done after I do the basics right)

Here is my code:

 <input type="radio" name="prepay" ng-model="radioSelect" value="prepay" ng-click="selectedPaymentType(radioSelect)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
 <input type="radio" name="purchasepower" ng-model="radioSelect" value="purchasepower" ng-click="selectedPaymentType(radioSelect)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
 <input type="radio" name="lease" ng-model="radioSelect" value="lease" ng-click="selectedPaymentType(radioSelect)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<!-- continue button -->
<button class="btn btn-primary btn-md" ng-click="opennext()">Continue</button>

Controller:

 $scope.opennext = function() {
}

What I am thinking is to disable my continue button untill a selection is made and for that I am thinking to use

ng-disabled="form.$invalid" 
ng-class="{gray:form.$invalid}"

Or somehow check if radio button not picked then in controller:

  if (check if radio picked) {
                      document.getElementById("btnSubmit").disabled = false;
            angular.element($('#btnSubmit')).removeClass("gray");
                     }

But I haven't used any form tag so this approch won't work.

Upvotes: 0

Views: 168

Answers (1)

palaѕн
palaѕн

Reputation: 73896

You can implement disable logic simply by check if radioSelect scope variable has any value set or not because initially, it will empty until any radio button is selected:

ng-disabled="!radioSelect" ng-class="{gray:!radioSelect}"

Working Demo:

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  $scope.radioSelect = ''  
});
.gray {background-color: #999;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp" ng-controller="AppCtrl">
  <h4>Please select one option:</h4>
  <input type="radio" name="prepay" ng-model="radioSelect" value="prepay" ng-click="selectedPaymentType(radioSelect)" required> Prepay<br/>
  <input type="radio" name="purchasepower" ng-model="radioSelect" value="purchasepower" ng-click="selectedPaymentType(radioSelect)" required> Purchase Power<br/>
  <input type="radio" name="lease" ng-model="radioSelect" value="lease" ng-click="selectedPaymentType(radioSelect)" required> Lease<br/><br/>
  <!-- continue button -->
  <button class="btn btn-primary btn-md" ng-click="opennext()" ng-disabled="!radioSelect" ng-class="{gray:!radioSelect}">Continue</button><br/><br/>
  
  <div ng-if="!!radioSelect"><b>Selected option:</b> {{ radioSelect }}</div>
</section>

Upvotes: 1

Related Questions