JSON Schema — Form Validation, with Angular & RESTHeart

In this article we will see how to use a JSON Schema to create a Form for an Angular application and how to validate it with RESTHeart.

The result will be an Angular app that uses the Form to save user’s informations (name, email and age) in a MongoDB database.

The JSON Schema

Let’s start creating our JSON Schema file called user.json that defines our users with the following properties:

• name, type string
• email, type string, format email
• age, type number

All the properties are required in our JSON Schema.

The Backend

We want to use a MongoDB database with a collection ‘users’ where to save our users. The collection must have a data validation mechanism so that only users who have the properties specified in the JSON Schema are accepted.

To do all this we use RESTHeart.

Download RESTHeart (you will receive an email with a trial license key) and run the setup as indicated in the official documentation.

The fastest way to launch RESTHeart is to use Docker, with which we create a container for the Mongodb and one for RESTHeart.

$ cd restheart-platform-<version>
$ docker-compose up -d

Please note that in this example we will leave RESTHeart with the default security configuration, so we use Basic Authentication with the default admin user and with the default password secret).

For the http REST call we use httpie.

$ http -a admin:secret GET localhost:8080
HTTP/1.1 200 OK
[ "users" ]

Now we want to create the data validation system that uses the previously created JSON Schema (users.json).

We create the _schemas collection to take advantage of the validation function through JSON Schema offered by RESTHeart, here the official documentation.

$ http -a admin:secret PUT localhost:8080/_schemas
HTTP/1.1 201 Created
...

Let’s now add to the _schemas collection the user.json schema:

$ http -a admin:secret PUT localhost:8080/_schemas/user < user.json
HTTP/1.1 201 Created
...

The last step is to apply our JSON Schema to the users collection:

$ echo '{ "checkers": [  { "name": "jsonSchema", "args": { "schemaId": "user" } } ] }' | http -a admin:secret PUT localhost:8080/users
HTTP/1.1 200 OK

We have done! RESTHeart is configured to validate JSON objects to be saved in the users collection, our backend is ready.

If we try to insert a user without the age attribute, which is mandatory, RESTHeart does not allow it and returns a 400 Bad Request:

$ echo '{"name": "Riccardo", "email": "riccardo@softinstigate.com"}' | http -a admin:secret POST localhost:8080/users
HTTP/1.1 400 Bad Request
...
{ "_warnings": [
"#: required key [age] not found"
],
"http status code": 400,
"http status description": "Bad Request",
"message": "request check failed"}

If the user we want to create has all the attributes in the format described in the schema, the POST will be successful:

$ echo '{"name": "Riccardo", "email": "riccardo@softinstigate.com", "age": 33}' | http -a admin:secret POST localhost:8080/users
HTTP/1.1 201 Created
...

To see all documents in the users collection:

$ http -a admin:secret GET  localhost:8080/users
HTTP/1.1 200 OK
...
[
     {
     "age": 33,
     "email": "riccardo@softinstigate.com",
     "name": "Riccardo"
     ...
     }
]

The Frontend

What we want to do now is to create an Angular application with a Form that allows to create and save users in the correct format, specified in the JSON Schema (user.json).
We create the Angular application using the angular-cli and install the Angular6-json-schema-form library that allows us to quickly and automatically create a Form starting from the JSON Schema:

$ mkdir frontend && cd frontend
$ ng new my-app
$ cd my-app
$ yarn add angular6-json-schema-form --save

Let’s import the modules needed to run angular6-json-schema-form within our application:

Let’s insert the JSON Schema user.json file inside our Angular application, in the ‘assets / schemas / user.json’ directory. At this point, our component must read the file and load the schema inside the <json-schema-form> component:

The submitForm function takes care of passing the data of the Form to our backend at http: 127.0.0.1: 8080/users.

The <json-schema-form> takes the jsonFormObject as input object to create the form.

Let’s style our app:

Our application is ready to be served:

$ ng serve

Here we have the form automatically generated by the JSON Schema! Here is the result:

Conclusions

The JSON Schema makes the creation and the validation of a Form activities relatively simple and fast. The functionality of RESTHeart allows us to have an efficient server-side validation system controlled by the JSON Schema, while the Angular Angular6-json-schema-form library transform the JSON Schema in a Form very easily.

In this tutorial we use Angular for the Frontend part but there are libraries to create a Form using a JSON Scheme also for React (react-jsonschema-form) or in simple javascript (jsonform), even those libraries can perfectly work with RESTHeart.