CODEWITHSUNDEEP
javascripthtmlangularjsvalidationionic-framework
CraZyDroiD
CraZyDroiD

Reputation: 7105

how to validate ionic radio buttons

I have this form that has a set of radio buttons. I can validate other fields but failed in validating radio buttons.I validate my other fields like this

<div class="form-group" ng-class="{ 'has-error' : (userForm.originAcc.$invalid || userForm.originAcc.$pristine) && submitted }">
    <label class="labelColor"><h5><b>Source Account Number *</b></h5></label>
    <select id="originAcc"  name="originAcc"style="margin: auto; width:100%" ng-model="user.originAcc"  ng-options="account.account for account in accountsArr"required>
        <option value="" >--Select Account--</option>
    </select>
    <span class="help-inline" ng-show="(userForm.originAcc.$pristine && submitted) ||( userForm.originAcc.$error.required && submitted)" >Source Account Number cannot be left blank.</span>
</div>

with the use of has-error class i validated these fields.How can i validate the radio buttons just like that?

My radio buttons html

<label class="labelColor"><h5><b>Select Standing Order Type</b></h5></label>
<div class="list">
<ion-radio ng-repeat="item in clientSideList" ng-value="item.value" ng-model="user.clientSide" required>
    {{ item.text }}
</ion-radio>
</div>

Radio button js

$scope.move = function () {

    var path;
    switch($scope.user.clientSide) {
        case 'ftso': path = 'app/so/fundtransferOrder'; break;
        //case 'oaso': path = 'app/so/ownstanding'; break;
        case 'utso': path = 'app/so/utilitytransferOrder'; break;
    }
    $location.path(path);

};

Upvotes: 1

Views: 2122

Answers (1)

CraZyDroiD
CraZyDroiD

Reputation: 7105

HTML PART 

<div class="form-group" ng-class="{ 'has-error' : thirdPartyForm.clientSide.$invalid && thirdPartyForm.clientSide.$dirty && submitted || (thirdPartyForm.clientSide.$invalid && thirdPartyForm.clientSide.$pristine) && submitted }" ng-init="data.type ='INTERNAL';transactionTypeChange('INTERNAL');hideFields();banksArray();">

    <div class="list">
        <ion-radio ng-repeat="item in accTypeList" name="clientSide" id="clientSide" ng-value="item.value" ng-model="data.type" ng-change="transactionTypeChange(item.value);hideFields(item.value);banksArray();pop();" required>
            {{ item.text }}
        </ion-radio>
    </div>
    <span class="help-inline" ng-show="submitted && userForm.clientSide.$error.required" >Type cannot be left unselected.</span>
</div>

JS PART

 $scope.accTypeList = [{text: "*************", value:"INTERNAL"}, {text:"Other Banks", value:"OTHER"}];

   $scope.transactionTypeChange = function(obj){

   if(obj.localeCompare('OTHER')==0){
   $scope.listOne= [{"id":"1","name":"Transfer (SLIPS)"},{"id":"2","name":"Transfer (CEFTS)"}];
   $scope.data.transtype =  $scope.listOne[0];
   $scope.validateDestAccFlag = false;
   } else if(obj.localeCompare('INTERNAL')==0){
   $scope.listOne = [{"id":"1","name":"****************"}];
   $scope.data.transtype =  $scope.listOne[0];
 ;
   $scope.validateAccFlag= true;
   $scope.validateDesitinationAccount($scope.data.origin, $scope.data.beneAcc);

   }

Upvotes: 1

Related Questions