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

'ngx-iso-form' is an Angular UI 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';
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"
                       ]
                        
                    

Component

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

                                form: IsoForm;
                                schema: SchemaElement;
                                // exclude the MsgId field from loading.
                                excludes:string[] = ['Document_BkToCstmrStmt_GrpHdr_MsgId'];

                                this.httpClient.get(sample).subscribe((data) => {
                                    this.schema = data as SchemaElement
                                });
                            
                                setWithJsonModel() {
                                    this.httpClient.get('path/to/model.json').subscribe((model) => {
                                      this.form = new IsoForm(model);
                                    });
                                  }
                                
                                  // New Support of XML Message as a model
                                  setWithXmlMessage() {
                                    this.httpClient.get('path/to/message.xml').subscribe((xmlMessage) => {
                                      this.form = new IsoForm(null, xmlMessage);
                                    });
                                  }
                            
                                //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;
                                }
                            }
                        
                    

Add component to view

                        
                            <ngx-iso-form [schema]="schema" [form]="form"></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.

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