NgxIsoForm

This form is used to design Angular Reactive Form using any given JSON - XSD. The primary use of this UI library is to design ISO 20022 forms dynamically.

Features

• 🔥 Automatic forms generation
• 📝 Easy to extend with custom field types
• ⚡️ Supports ISO 20022 schemas:
  • XSD - JSON Schema using XSDService nuget
  • Support all validation like required, pattern, minlength, maxlength
  • Support translation labels, errors and date formats.
• 💪 Built on top of Angular Reactive Forms

Live Demo

StackBlitz Demo

NOTE

The library don't support direct execution of XSD and user need to convert XSD to JSON using xsd-json-converter npm package

How to consume

Add angular material v18

ng add @angular/material

Install npm package ngx-iso-form.

npm i ngx-iso-form

Import Module & SCSS

import { NgxIsoFormModule } from 'ngx-iso-form';
import { HttpClient, provideHttpClient } from '@angular/common/http';

@NgModule({
  ...
  imports: [
    ...
    NgxIsoFormModule
  ],
  provider:[provideHttpClient()]
  TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
    ...
})

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/i18n/', '.json');
}

Add style file to angular.json file

styles:[
     "node_modules/ngx-iso-form/lib/styles/index.scss"
]

View

New Option excludes

<ngx-iso-form #isoForm [schema]="schema" [form]="form" [excludes]="excludes"></ngx-iso-form>

**NOTE: excludes (optional) takes string[] and excludes all the mentioned Ids from the form. It will help you to minimize the form and include only the required fields for your business requirements.

Public APIs

• model: Get the form data in the json format
• invalid: Get the validation status of the form. true | false

@ViewChild('isoForm') isoForm: NgxIsoFormComponent;

get model():string {
    const data = this.isoForm.model;
    this.formData = JSON.stringify(data)
  }
get invalid():boolean {
  return this.isoForm.invalid;
}

Component

export class AppComponent implements OnInit {
    @ViewChild('isoForm') isoForm: NgxIsoFormComponent;

    form: IsoForm;
    schema: SchemaElement;
    // exclude the MsgId field from loading
    excludes:['Document_BkToCstmrStmt_GrpHdr_MsgId']
    
    this.httpClient.get(sample).subscribe((data) => {
      this.schema = data as SchemaElement
    });

    this.httpClient.get(sampleLoad).subscribe((model) => {
      this.form = new IsoForm(model)
    });

    //To get the form object
    get model():string {
      const data = this.isoForm.model;
      this.formData = JSON.stringify(data)
    }

  //To get the form validation status
    get invalid():boolean {
      return this.isoForm.invalid;
    }

}

Supported JSON Schema

export interface SchemaElement {
  id: string;
  name: string;
  dataType: string;
  minOccurs: string;
  maxOccurs: string;
  minLength: string;
  maxLength: string;
  pattern: string;
  fractionDigits: string;
  totalDigits: string;
  minInclusive: string;
  maxInclusive: string;
  values: string[];
  isCurrency: boolean;
  xpath: string;
  expanded: boolean;
  elements: SchemaElement[];
}

Translation Support

It support name and id properties of the SchemaElement Please declare all your translation rules under 'iso' object.

{
  "iso": {
    "BkToCstmrStmt": {
      "label": "Bank To Customer Statement"
    },
    "GrpHdr": {
      "label": "Group Header"
    },
    "Document_BkToCstmrStmt_GrpHdr_CreDtTm": {
      "label": "Create Datetime",
      "general": {
        "format": "YYYY-MM-DDThh:mm:ss.sss+/-"
      },
      "error": {
        "required": "This field is required"
      }
    }
  }
}

Convert XSD to JSON

Global (For CLI)

    npm install -g xsd-json-converter

Local (For SCRIPT)

    npm install xsd-json-converter

CLI

xjc <source-path> <output-path>

Example

Linux

xjc /mnt/c/source/xsd/camt.053.001.10.xsd /mnt/c/source/xsd/camt.053.json

Windows

xjc C:/source/xsd/camt.053.001.10.xsd C:/source/xsd/camt.053.json

Script

JavaScript

const xsd = require("xsd-json-converter").default;

xsd
  .convert("./camt.053.001.10.xsd")
  .then((output) => console.log(output))
  .catch((error) => console.error(error));

TypeScript

import xsd from "xsd-json-converter";

xsd
  .convert("./camt.053.001.10.xsd")
  .then((output) => console.log(output))
  .catch((error) => console.error(error));

NOTE: For script please install the package locally