angularjsionic-v1

Form Validation Not Working on IONIC but working on AngularJS


I have to provide mandatory fields validation in my ionic app. But, i am not being able to get the default angular form validation working. I used ng-submit but in ionic that's not even firing the submit. Is there a directive that i can use

<ion-view title="Dashboard">
  <ion-content class="has-header padding">
    <form name="myForm" ng-controller="DashCtrl">
      <input type="radio" ng-model="color" value="red" required>  Red <br/>
      <input type="radio" ng-model="color" value="green" required> Green <br/>
      <input type="radio" ng-model="color" value="blue" required> Blue <br/>
      <tt>color = {{color | json}}</tt><br/>
      <button type="submit" ng-click="submitForm()">Submit</button>
    </form>
  </ion-content>
</ion-view>

But, if its an AngularJS app, its working as expected

AngularJS Plunkr : https://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview

IONIC Plunkr : https://plnkr.co/edit/tr7btg7mr0SHhbOB?p=preview


Solution

  • For HTML5 not working in Ionic check maybe this answer from html5 validation in Ionic

    But, you can do this as well:

    change your submit with ng-click="submitForm(myForm)"

    and your submit function like this

       $scope.submitForm = function(form) {
         if (form.$valid == true){
           console.log('yay')
         } else {
           console.log('Nyay')
         }
        };
    

    forked your plnkr with this changes, check it HERE

    Hope it helps!