离子单选按钮验证

Posted

技术标签:

【中文标题】离子单选按钮验证【英文标题】:ionic radio button validation 【发布时间】:2014-12-15 08:03:39 【问题描述】:

我正在为我的应用程序使用 ionic/angularjs 制作表单。在那里,我对所有字段都使用了验证。但是我对单选按钮的验证无法正常工作。如果未选择单选按钮(应该这样),它会显示错误消息,但即使我选择了单选按钮,它也会显示错误消息。我该如何解决这个问题?

或者如何设置默认选中的单选按钮?

我的表格

            <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>

【问题讨论】:

我会要求您: 1 - 简化您的 html 代码(我们不需要知道所有细节,例如 CSS ID 或类); 2 - 向我们展示 javascript; 3 - 将其发布在 plnkr 或 JSFiddle 中 我的验证部分完全在 html 中完成 如果可以的话,请看#1。 【参考方案1】:

Ionic 文档指出 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>

【讨论】:

【参考方案2】:

您必须在 ionic 框架中设置单选按钮的默认值 遵循此代码:-

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

【讨论】:

以上是关于离子单选按钮验证的主要内容,如果未能解决你的问题,请参考以下文章

如何在按钮单击时提交离子单选按钮值?

离子动态单选按钮组

使用angular提交后如何获取所选离子单选按钮的值

layui根据条件判断验证(单选按钮)

单选按钮验证

如何在单选按钮后显示验证消息?