ngx-iso-form v2.0.1

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