ngx-iso-form-enterprise - Angular UI for ISO 20022 Message Creation

'ngx-iso-form-enterprise' is an Angular UI enterprise library designed to streamline the creation and validation of ISO 20022 messages. It dynamically builds a user interface based on the provided JSON, featuring pre-built form components that fully comply with ISO 20022 standards. This library simplifies the process of generating complex financial messages, offering a flexible and robust solution for developers working with ISO 20022 data.

Import Module & SCSS

                        
                            import { NgxIsoFormModule } from 'ngx-iso-form-enterprise';
import { HttpClient, provideHttpClient } from '@angular/common/http';
// register license key
const licenseKey = 'eyJleHBpcn......wI=';
IsoLicenseManager.registerLicense(licenseKey);
@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-enterprise/lib/styles/index.scss"
                       ]
                        
                    

Component

                        
                            export class AppComponent implements OnInit {
                                formApi: FormApi;
                                schema: SchemaElement;
                                excludes: string[] = [];

                                constructor(private httpClient: HttpClient,private license: IsoLicenseService) {}

                                ngOnInit() {
                                    //validate license
                                    this.license.validate().then(() => {
                                        this.httpClient.get("path/to/schema.json").subscribe((data) => {
                                            this.schema = data as SchemaElement;
                                        });
                                    }):
                                }

                                setWithJsonModel() {
                                    this.httpClient.get("path/to/model.json").subscribe((model) => {
                                    this.formApi.setJsonForm(model);
                                    });
                                }

                                // New Support of XML Message as a model
                                setWithXmlMessage() {
                                    this.httpClient.get("path/to/message.xml").subscribe((xmlMessage) => {
                                    this.formApi.setXmlForm(model);
                                    });
                                }

                                onFormReadyEvent(data: FormReadyEvent) {
                                    this.formApi = data.api; //FormApi
                                }
                            }
                        
                    

Add component to view

                        
                            <ngx-iso-form [schema]="schema" [form]="form" (OnFormReadyEvent)="onFormReadyEvent($event)"></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 or sections for your business requirements.

Public API

                        
                            export class FormReadyEvent {
                                api: FormApi;
                            }
                            export interface FormApi {
                                invalid: boolean;
                                setXmlForm: (model: any) => void;
                                setJsonForm: (model: any) => void;
                                getForm: () => any;
                                getNamespace: () => string;
                            }
                        
                    

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