离子单选按钮验证

Question

I'm doing a form using ionic/angularjs to my application. 我正在为我的应用程序使用ionic / angularjs做一个表单。 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>

Answer 1

Ionic docs state that ion-radio works like Angular's input[radio] . Ionic docs声称ion-radio作用类似于Angular的input[radio] 。 You can use ng-required="true" like this: 您可以像这样使用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>

You can then use it in concert with an error message. 然后，您可以将其与错误消息一起使用。 I use ngMessages . 我使用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>

Answer 2

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'
    };  
});

离子单选按钮验证

问题描述

2 个解决方案

解决方案1
6 2016-02-23 22:00:42

解决方案2
4 已采纳 2014-11-28 19:28:13

离子单选按钮验证

问题描述

2 个解决方案

解决方案1 6 2016-02-23 22:00:42

解决方案2 4 已采纳 2014-11-28 19:28:13

解决方案1
6 2016-02-23 22:00:42

解决方案2
4 已采纳 2014-11-28 19:28:13