XSD - JSON powered / Dynamic ISO 20022 forms in Angular
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.
- 🔥 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
ng add @angular/material
npm i ngx-iso-formimport { 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"
]<ngx-iso-form [schema]="schema" [form]="form"></ngx-iso-form>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();
}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[];
}- 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"
}
}
}
}