ngx-iso-form

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');
}
                        
                    

Parsing Rules

Please follow the Parsing Rules example given in the data directory of the repository. Mapping Rules should follow below model class structure

                        
                            public class MappingRules
                            {
                                public string Namespace { get; set; }
                                public List Mappings { get; set; }
                            }

                            public class MappingTable
                            {
                                public string NodeName { get; set; }
                                public string XPath { get; set; }
                                public IList Columns { get; set;}
                            }

                            public class MappingColumn
                            {
                                public int OrderNumber { get; set; }
                                public string NodeName { get; set; }
                                public string XPath { get; set; }
                                public string DataType { get; set; }
                                public int MinLength { get; set; }
                                public int MaxLength { get; set; }
                                public int fractionDigits { get; set; }
                                public int totalDigits { get; set; }
                            }
                        
                    

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
                                });
                            
                                this.httpClient.get(sampleLoad).subscribe((model) => {
                                    this.form = new IsoForm(model)
                                });
                            
                                //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"
                                         }
                                    }
                                }
                            }