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

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