NgxIsoForm

This form is used to design Angular Reactive Form using any given 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

How to consume

Add angular material

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, HttpClientModule } from '@angular/common/http';

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

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/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.form = new IsoForm(null);
    });

    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;
    elements: SchemaElement[];
}

3. 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"
             }
        }
    }
}