Rapid Form Building with Angular JSON Schema Form Library

Code

As a web developer, it’s good to build a bag of tricks that helps you focus on the most interesting core problems of your app. At times, it can be helpful to delegate some UI tasks to automation. Let’s say you have some setup or maintenance screens that need to be implemented. Can we use meta data and a clever view to generate forms?

In the past few weeks, I have started digging into applications of JSON schema(https://json-schema.org/) in web development. JSON schema enables developers to describe nouns in their problem domain in a well defined structure of properties, annotations, and property types. The schema enables you to describe required properties, field display preferences, constraints, and more. Let’s look at a simple example below:

{
  "$id": "https://example.com/person.schema.json",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Person",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string",
      "description": "The person's first name.",
      "required": true
    },
    "lastName": {
      "type": "string",
      "description": "The person's last name.",
      "required": true
    },
    "age": {
      "description": "Age in years which must be equal to or greater than zero.",
      "type": "integer",
      "minimum": 0
    }
  }
}

In the previous example, we can see a person entity with three properties. ( firstName, lastName, age) Using the JSON schema definition, we can leverage a broad range of code generation patterns to build requests, responses, services, persistence code or many aspects of our architecture.

In this post, I wanted to focus on a very practical library called Angular JSON Schema Form(AJSF) that transforms JSON schema data into a working form. For Angular developers, this can be a great time saver to accelerate highly patterned form development. The framework supports Angular material and Bootstrap. The pattern can be expandable to other frameworks as needed. (Foundation , etc.)

Using AJSF, we can convert the previously stated schema data into a form.
AJSF demo

Let’s say that you’ve built an Angular2+ app. Your journey with AJSF starts with installing AJSF for Angular material. Keep in mind that they also have packages for Bootstrap 3 or 4.

npm install @ajsf/material

Make a few updates to your app.module.ts .

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialDesignFrameworkModule } from '@ajsf/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    MaterialDesignFrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Let’s add a json-schema-form component to our view component markup. In this snippet, we’re connecting the component to a viewModel object and using material design. We have also associated an event handler to manage the form submit process.

<json-schema-form
  loadExternalAssets="false"
  [(ngModel)]="viewModel"
  framework="material-design"
  (onSubmit)="onFormSubmit($event)"
>
</json-schema-form>

In this very simple example, AJSF has reflected upon the view model object and generated a schema definition. From there, the component generates a sensible form. Using the form submit handler, we can validate the view model and submit the data back to a server.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'json-schema-test';
  viewModel = {
    firstName: 'bob',
    lastName: 'smith',
    email: 'bob@here.com',
    age: 32
  };

  onFormSubmit(eventData) {
    console.log(eventData);
  }
}

This open source project has very good documentation to explore more advanced scenarios. Make sure to check it out here. Hope that this library can save time and help you focus on the more interesting parts of your problem domain.

https://github.com/hamzahamidi/ajsf

Be the first to comment

Leave a Reply

Your email address will not be published.


*