Ionic Contact Form with Symfony2 and Angular Validations

With the final technical hurdles passed, the remaining chores include fixing usability issues, getting the promotional / marketing website sorted out, and creating a Google Play Store listing.

Now, interestingly, if you have never done a Google Play Store listing before, the process is quite long-winded. You need a fair amount of correctly sized images - predominantly screenshots - but also some images that you likely won't have available. And whilst it would be lovely if the ionic resources tool created these for you, sadly, it does not.

This is something to be aware of / prepared for if you do go ahead and buy your logo in using a service like fiverr. Make sure you get the .psd or .ai file so you can hack your way out of these sorts of unexpected eventualities.

You will also need a Google Group prepared if you're planning on doing any Alpha or Beta testing of your app. You can create one as required, but the interface is kinda ham-fisted.

Then you need to add in all your testing chums. And I do advise completing this stage, if not to test your code, then to get some feedback on usability.

You can find a really nice guide here to get you through the process. It's largely unavoidable as it repeats all the steps you need to get your app in to production / selling via Google Play anyway.

Contact Formalities

I already covered the overview of how we can get a simple RESTful contact form to work using Ionic / Angular and our Symfony 2 API.

But that implementation is far from perfect.

To begin with, we will cover adding in some simple Symfony validation constraints to our Contact entity.

Whilst easy to add and use, these validators are super powerful and come in very handy on many projects.

They allow us to do things like say - ok, this field should only allow strings that look like email addresses, or if this field is blank then the error message should be {xyz}.

// src/ApiBundle/Entity/Contact.php
<?php

namespace ApiBundle\Entity;

use Symfony\Component\Validator\Constraints as Assert;

class Contact
{
    /**
     * @ORM\Column(type="string", length=255)
     * @Assert\Email()
     */
    protected $email;

The nice thing is that these work out of the box for us with the Symfony Form component. No extra work required.

Given we already have the contact end-point set up and working, we can see for example that sending in a badly formatted email:

{
  "name": "tim thumb",
  "email": "tim",
  "message": "some text here"  
}

returns:

{
  "code":400,
  "message":"Validation Failed",
  "errors":{
    "children":{
      "name":[],
      "email":{
        "errors":["This value is not a valid email address."]
      },
      "message":[]
    }
  }
}

All for free. Very nice.

And remember, the joy of using the REST architecture is that literally anything that is capable of doing so can send in the same JSON and get back exactly the same response.

Front End Changes

With a bit of extra work, it would be possible to take that / those error messages delivered back by our Symfony2 API and display them nicely in our Ionic mobile App.

Instead, and although admittedly a hack / bad practice, I am going to rely on Angular to ensure the app doesn't send in duff data, rather than deal with the .success or .error outcomes properly.

This will be addressed in the next release, but to get to v1.0.0 I am doing as little as possible - as frankly, there is an absolute ton of stuff to be done and not just in code.

{.img-responsive}

The video goes in to the code in greater depth.

Essentially the form should not be submittable if any of the fields are invalid.