Geek Answers Handbook

Ion radio installation

I am making a form using ionic / angular characters for my application. There I used check all fields. But my check on the switches is not working properly. An error message appears if the radio button is not selected (as it should). But an error message is also displayed, even if I selected the switch. How can i fix this?

OR How to set the default switch to the default?

My form

            <div class="form-group" ng-class="{ 'has-error' : (userForm.choice.$invalid || userForm.choice.$pristine) && submitted }">
            <label class="labelColor"><h5><b>Select Standing Order Type</b></h5></label>
            <ion-radio ng-model="choice" name="choice" id="choice" ng-value="'A'">Utility Standing Order</ion-radio>
            <ion-radio ng-model="choice" name="choice" id="choice" ng-value="'B'">Own Account Standing Order</ion-radio>
            <ion-radio ng-model="choice" name="choice" id="choice" ng-value="'C'">Third Party Fund Transfer Standing Order</ion-radio>
            <span class="help-inline" ng-show="(userForm.choice.$pristine && submitted) ||( userForm.choice.$error.required && submitted)" >Standing Order Type Should Be Selected.</span>
            </div>

          <!-- BUTTONS -->
            <div class="col"style="text-align: center">

               <button align="left" class="button button-block button-reset" style="display: inline-block;width:100px;text-align:center " type="reset"
                        ng-click="submitted = false;  reset()" padding-top="true">Reset</button>
                <button class="button button-block button-positive"  style="display: inline-block;width:100px "
                    ng-click="submitted=true; "padding-top="true">Proceed</button>
            </div>

        </form>

    </ion-content>
</ion-view>
+4
source share
2 answers

You must set the default value for the switch in the ionic structure. Follow this code: -

enter code here
<body ng-controller="MainCtrl">
    <ion-content>  
        <div class="list">
            <ion-radio ng-repeat="item in clientSideList" ng-value="item.value" 
             ng-model="data.clientSide"> {{ item.text }}
            </ion-radio>
        </div>
    </ion-content>
</body>

.controller('MainCtrl', function($scope) {
    $scope.clientSideList = [
        { text: "Backbone", value: "bb" },
        { text: "Angular", value: "ng" },
        { text: "Ember", value: "em" },
        { text: "Knockout", value: "ko" }
    ];
    $scope.data = {
        clientSide: 'ng'
    };  
});
+4
source

, ion-radio Angular input[radio]. ng-required="true" :

<form name="myForm" novalidate ng-submit="onSubmit(myForm.$valid)">
    <ion-list>
        <ion-radio ng-model="choice" name="choice" id="choice" ng-value="'A'" ng-required="true">Choice A</ion-radio>
        <ion-radio ng-model="choice" name="choice" id="choice" ng-value="'A'" ng-required="true">Choice A</ion-radio>
    </ion-list>
</form>

. ngMessages. :

<div ng-messages="myForm.gender.$error"
     class="form-errors"
     ng-show="myForm.gender.$invalid && myForm.$submitted">
    <div ng-messages-include="views/form-errors.html"></div>
</div>
+5

More articles:


All Articles