離子單選按鈕驗證

我正在做一個使用離子/ 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>

來源

2014-10-20 CraZyDroiD

我會問你：1 - 簡化你的HTML代碼（我們不需要知道所有的細節，如CSS ID或類）; 2 - 向我們展示JavaScript; 3 - 張貼在一個plnkr或JSFiddle – 2014-10-20 11:12:13

我的驗證部分完全在html內完成 – CraZyDroiD 2014-10-20 11:13:50

然後請參閱＃1，如果可能的話。 – 2014-10-20 11:14:33

你離子框架設置單選按鈕的默認值關注這個代碼： -

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

來源

2014-11-28 19:28:13 kash

離子文檔狀態ion-radio作品像角的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>

來源

2016-02-23 22:00:42

離子單選按鈕驗證

回答

相關問題