ngx-iso-form

XSD - JSON powered / Dynamic ISO 20022 forms in Angular v18

---

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

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

Component

export class AppComponent implements OnInit {
    form: IsoForm;
    schema: SchemaElement;

    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 please use
    // this.form.getFormModel();
}

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