Problem with modal form submitting on iOS

Hey all,

I am developing a simple tab based app with Ionic. One tab has a button which calls a modal popup that contains a small form with a couple of fields. On the form is also a button which calls the Camera to take a photo on a device.

On a browser, the form works perfectly, and clicking the camera button will throw an error that the Camera object cannot be instantiated - as expected.

However, when I run the app on my iPhone, tapping the camera button results in the form automatically submitting instead of open the camera object.

I tried removing the camera code and just placed a button that called a popup. Works beautifully on the browser as the modal form stays open when the popup appears and is dismissed.

But once again, on iOS, the button simply closes the modal and triggers the submit code. The form has an ng-submit=“saveEntry(). The button has ng-click=“testMe(). Yet it appears that on iOS $scope.testMe() is never being called, instead $scope.saveEntry() seems to be… Is this a bug or have I missed something?

SOLVED! After doing more research online and testing, I realised that on the other buttons on my form, I had to put the attribute type=“button” within the tag, otherwise Angular would assume that the button had the attribute type=“submit”.

Now the other buttons do not automatically submit the form as they were!

EDIT: This post was the clincher in me getting the answer: https://coderwall.com/p/hvy1rg/angularjs-how-to-prevent-form-submission-after-click-on-button

3 Likes

Hey there, glad to see you found an answer.
Angular can be a bit tricky when it comes to working with forms

Another good source of info that helped me was this.

Had the same issue with ionic 2 / angular 2. Thanks.