How to check in $ ionicPopup?

Question

I am trying to use $ ionicPopup to handle login / registration in my application. I open it from the service, so I created a new scope and bound it to ionicPopup. It looks like this:

$ionicPopup.show template: ''' <form name="loginForm" novalidate> ... </form> ''', scope: $scope, buttons: [ { text: 'Cancel', }, { text: '<b>Save</b>', type: 'button-positive', onTap: ( e ) -> form = $scope.loginForm #why is it undefined? } ] 

So, I called the loginForm form, and I want to access it inside the onTap function to handle validation. But loginForm does not exist in $ scope, as it would be with the usual form validation inside the controller. So, do you have any ideas on how I should handle validation here?

Thanks!

Answer 1

I figured out the ugly but working solution that I am currently using. If you give ionicpopup templateUrl instead of the string string of the template, you can use a regular template inside the template that performs the validation.

Currently, I removed all the buttons related to ionicpopup (anyway, I found them really uncomfortable) and gave the necessary buttons inside the template.

And in this way I can control the state of ionicpopup from the controller (for example, by closing the popup)

Tomorrow I will create a jsFiddle example if someone is interested.

But if you have a better solution, share: D

Answer 2

I found a solution, it works for me. Everything you need to change determines your form in the controller:

 $scope.form = { loginForm: {} }; $ionicPopup.show template: ''' <form name="form.loginForm" novalidate> ... </form> ''', scope: $scope, buttons: [ { text: 'Cancel', }, { text: '<b>Save</b>', type: 'button-positive', onTap: ( e ) -> form = $scope.form.loginForm } ] 

Answer 3

Using my solution, you do not need to remove the ion popup buttons.
What you can do for validation is to use the ng-Model.

You do not need to use <form> . Therefore, I delete the <form> .

  $ionicPopup.show template: '<input name="username" ng-model="data.username">', scope: $scope, buttons: [ { text: 'Cancel', }, { text: '<b>Save</b>', type: 'button-positive', onTap: ( e ) var user_name = $scope.data.username // do validation here if(user_name != 'undefined') { ... } } ] 

I prefer not to remove the ion popup buttons. Hope this is helpful to others.
greetings!