How to do validation in $ionicPopup? - angularjs

Question

I'm trying to use $ionicPopup to handle login/registration on my app.
I'm opening it from a service, so I created a new scope and attached it to the ionicPopup.
It looks something 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 named the form as loginForm, and I want to access it inside the onTap function to handle validation. But the loginForm does not exists on the $scope, like it would in a normal form validation inside a controller.
How should I handle the validation here?

Answer 1

If you give ionicpopup a templateUrl, instead of hard coded template string, you can use a regular controller inside the template that does the validation.
I deleted all the ionicpopup related buttons and placed the necessary buttons inside the template.
In this way I was able to control the ionicpopup's state from the controller (i.e. closing the popup).

Answer 2

I found solution, it works for me. All you need to change is define in controller your form:
$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 don't have to delete the ionic popup buttons.
What you can do to validate, is by using ng-Model.
You don't have to use <form>. So I remove <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 ionic popup buttons. Hope it is useful to others. cheers!

Answer 4

Use
onTap: ( e )
e.eventPreventDefault()
var user_name = $scope.data.username
// do validation here
if(user_name != 'undefined') {
...
}