Menu
I'm doing a form using ionic/angularjs to my application. There I've used validation to all the fields. But my validation on radio buttons do not work properly.It is showing a error message if a radio button is not chosen(Like it should) But also it shows a error message even if I've selected a radio button. How can I fix this?
OR How can I set a default checked radio button?
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>
554
Ionic docs state that ion-radio works like Angular's input[radio]. You can use ng-required="true" like this:
<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>
You can then use it in concert with an error message. I use ngMessages. Example:
<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>
You have to set default value of radio button in in ionic framework 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'
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
