{"_id":"@elemental-concept/ngx-dynamic-form","_rev":"2-023c380ff9ae876dd6cc27e830793a58","name":"@elemental-concept/ngx-dynamic-form","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@elemental-concept/ngx-dynamic-form","version":"1.0.0","description":"This library generates Angular `FormGroup` and related DOM from a specified JSON configuration.","repository":{"type":"git","url":"git+https://github.com/elementalconcept/ngx-dynamic-form.git"},"keywords":["form","json","angular"],"author":{"name":"Elemental Concept"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/elementalconcept/ngx-dynamic-form/issues"},"homepage":"https://github.com/elementalconcept/ngx-dynamic-form#readme","peerDependencies":{"@angular/common":"^15.0.0","@angular/core":"^15.0.0","@ngneat/until-destroy":"^9.2.3","@ngx-translate/core":"^14.0.0","@ngx-translate/http-loader":"^7.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/elemental-concept-ngx-dynamic-form.mjs","es2020":"fesm2020/elemental-concept-ngx-dynamic-form.mjs","esm2020":"esm2020/elemental-concept-ngx-dynamic-form.mjs","fesm2020":"fesm2020/elemental-concept-ngx-dynamic-form.mjs","fesm2015":"fesm2015/elemental-concept-ngx-dynamic-form.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elemental-concept-ngx-dynamic-form.mjs","es2020":"./fesm2020/elemental-concept-ngx-dynamic-form.mjs","es2015":"./fesm2015/elemental-concept-ngx-dynamic-form.mjs","node":"./fesm2015/elemental-concept-ngx-dynamic-form.mjs","default":"./fesm2020/elemental-concept-ngx-dynamic-form.mjs"}},"sideEffects":false,"_id":"@elemental-concept/ngx-dynamic-form@1.0.0","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Lfp4FpjbANrzO6hg62w58j+gKO1qHOi282V81MSk/JwTi/IFEfFSJBTXQMyMRyEw6Lb+hxFni2aounL6k3LAlg==","shasum":"b15f78bf2c1a7f1a601b862d1fcce96454689429","tarball":"https://registry.npmjs.org/@elemental-concept/ngx-dynamic-form/-/ngx-dynamic-form-1.0.0.tgz","fileCount":48,"unpackedSize":207585,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMhSBPxpmat9BbwJaPa/ntbSs0E2nZIeZWltKAbGbpUAiAHBwVlQf0pLmn4iNaU1l8PBfg19F1WhgLOr6bXanSdKg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PbqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Yw//b0tX8bruR8jgAYrNU1PQG3xs4aQRsfk4J2xovSo8pRlolv7Y\r\nPFq44Q3T4nSKYWaN4wBKEKVW46R199ROEEmAxzAwFqE7kT9WLRPWwe37l+Ec\r\nxegWKaWNkbVWeivPHEHgEaK99TbZGLsTOdDaj4nLNodmiUMdHKlDqjU6qRDE\r\niKnvOHP+IMd3hPmeJBfJhX8MGlcLFMcHzQ4oAf7km0URV9BKXdUlmyobqGkf\r\nR/05yDK/GgPFMmFmkONeOSlFEmdml37edRM5UXwlC+ALx+yCRuSxuTA42WNm\r\n6bT3aavTvpfUXQPJ3Ukc9Q9/NsxW0otQyNr4X9mJo7CxCeWsyd6pdMVJL68C\r\nRN7FcrtUfn6vc7k8z/mdWx+mJ1MvcWoTyfR339vp9dIKxneXpe0qKwXR6msx\r\nt6+YnX9fzUSkLG+xeU/xv0WSuDgIPNL+8iNJRRgqticTBIukp69CT4MCVIIA\r\nl5dS9K8yqs2LsXrO0xcHlBLSJUngshP/cHNraEyJCcLvFfaORFBDEUGicPHe\r\nijeos0m2cAfyNRizUAhfS1wSIgieTIySJQgJUdUWS9HkSaH6qz0ubl9KEuUJ\r\nKO0083+0mk5iR/fZlXS9Pqh08y6CyKTnlZVF33UxDcxvJ1Y+fr5awGLepHrv\r\n5qVUmdeZEVmdJxMuoRCpn750fewsCeTcPg4=\r\n=tY9e\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"simke2090","email":"simke2090@yahoo.it"},"directories":{},"maintainers":[{"name":"aux","email":"aux@hexmode.org"},{"name":"simke2090","email":"simke2090@yahoo.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-dynamic-form_1.0.0_1677522666714_0.3823817150504121"},"_hasShrinkwrap":false},"1.0.1":{"name":"@elemental-concept/ngx-dynamic-form","version":"1.0.1","description":"This library generates Angular `FormGroup` and related DOM from a specified JSON configuration.","repository":{"type":"git","url":"git+https://github.com/elementalconcept/ngx-dynamic-form.git"},"keywords":["form","json","angular"],"author":{"name":"Elemental Concept"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/elementalconcept/ngx-dynamic-form/issues"},"homepage":"https://github.com/elementalconcept/ngx-dynamic-form#readme","peerDependencies":{"@angular/common":"^15.0.0","@angular/core":"^15.0.0","@ngneat/until-destroy":"^9.2.3","@ngx-translate/core":"^14.0.0","@ngx-translate/http-loader":"^7.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/elemental-concept-ngx-dynamic-form.mjs","es2020":"fesm2020/elemental-concept-ngx-dynamic-form.mjs","esm2020":"esm2020/elemental-concept-ngx-dynamic-form.mjs","fesm2020":"fesm2020/elemental-concept-ngx-dynamic-form.mjs","fesm2015":"fesm2015/elemental-concept-ngx-dynamic-form.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elemental-concept-ngx-dynamic-form.mjs","es2020":"./fesm2020/elemental-concept-ngx-dynamic-form.mjs","es2015":"./fesm2015/elemental-concept-ngx-dynamic-form.mjs","node":"./fesm2015/elemental-concept-ngx-dynamic-form.mjs","default":"./fesm2020/elemental-concept-ngx-dynamic-form.mjs"}},"sideEffects":false,"_id":"@elemental-concept/ngx-dynamic-form@1.0.1","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-0qivRm7cp/jC+kKchK0RLNewwfTN80yMI9Lb59ZjLRmWoXwOcqSl7LlwvyW3xQwjQanK3oJzltEsa/glaKV4uw==","shasum":"42b854b6340d4e2e4c5d5c83e83983cc38085be2","tarball":"https://registry.npmjs.org/@elemental-concept/ngx-dynamic-form/-/ngx-dynamic-form-1.0.1.tgz","fileCount":48,"unpackedSize":207585,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQqhON6dI8KwAujz8fC/AuImg3R5FIbNdK+6TmYZH2cwIgNm68V0YCFJwM+lAruT7hg7aslz5oz0Xv8NQmylRBnQM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkA1LeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhLw//b704K9dj1d1ibp2ZSiIxafoIuI3721M7Vw5IH5R3c6Z3uHGX\r\n5J8eqnWd4g0RlRnRWG7XzHSTBtUMp07TmunJEoxRkG5PlJ0tqKctRaie7duU\r\nT9eb+P1CE7QFeuiWzLqfIWAgkniOYVNpvC1xJNzh9NnLMKNp2Htite1BpysQ\r\nEgCJ/lIiVqpB9wuHtNJbqzUztxQz6SAnJfFbT+2GZHAALV9yj6H5MPRUsYWr\r\n4IDbKoa9vfrsoNNbJAOk5kfa9LkCDZo2nY6KRAPxRPT9HdcIICxDuGaEjcmL\r\nIXhYWWAVuChcM/myqSVCHztNn7+p4dtLNSgI4fsYD9yAtYlIDaVjPxDp3rVw\r\nKfQ6goQVmlFUxTlRToc14osofvL/OcoXNJHvCzwiOwXlB36VM57hgSvTcOsl\r\nzPfq2/+KwjcJYbgoB5tAQlVhEI5VSXRkcYKJhAQ9D/AZVixB4/lvSYUDknN7\r\no6KDk1mvcsFJVRDGOy7WV2yP5nqdVHowpK9TZHozu+XjMBo+roCL3cCAhUgg\r\nTu0C1ZXy0pQZwc1ExpG+9Ow/BfG3giGeQwCl7sdRbbvY7Z+9YmJZBHWNWfEM\r\nYolANSKgTJQIvTjounXOVXLeGmyXyAjVkUuGwbEMxPcG/XFc8DExkrnY7vGq\r\nyh9F7ZwlUYBtXahQQfoxSUd1F8M4zQnqjFw=\r\n=8oAP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"simke2090","email":"simke2090@yahoo.it"},"directories":{},"maintainers":[{"name":"aux","email":"aux@hexmode.org"},{"name":"simke2090","email":"simke2090@yahoo.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-dynamic-form_1.0.1_1677939422501_0.8443182053860061"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-27T18:31:06.630Z","1.0.0":"2023-02-27T18:31:06.896Z","modified":"2024-05-16T11:57:45.015Z","1.0.1":"2023-03-04T14:17:02.715Z"},"maintainers":[{"email":"david@elementalconcept.com","name":"ecdavid"},{"email":"aux@hexmode.org","name":"aux"},{"email":"simke2090@yahoo.it","name":"simke2090"}],"description":"This library generates Angular `FormGroup` and related DOM from a specified JSON configuration.","homepage":"https://github.com/elementalconcept/ngx-dynamic-form#readme","keywords":["form","json","angular"],"repository":{"type":"git","url":"git+https://github.com/elementalconcept/ngx-dynamic-form.git"},"author":{"name":"Elemental Concept"},"bugs":{"url":"https://github.com/elementalconcept/ngx-dynamic-form/issues"},"license":"BSD-2-Clause","readme":"# Dynamic Form\n\nThis library generates Angular `FormGroup` and related DOM from a specified JSON configuration. Such configuration can\neither be baked in into the application or received dynamically from back-end. Exact form input fields are NOT part of\nthe library and must be provided by a library user. A set of Material based input components can be found in\n[Material Components For Ngx Dynamic Form](https://github.com/elementalconcept/ngx-dynamic-form-material/)\n.\n`Ngx Dynamic Form` is only compatible with Angular v11+.\n\n## Installation\n\nInstall the library through NPM:\n\n```shell\n$ npm i @elemental-concept/ngx-dynamic-form\n```\n\n`NgxDynamicFormModule` should be included into your Angular modules automatically by IDE. If your IDE doesn't support such\nfunctionality, don't forget to add it manually:\n\n```typescript\nimport { NgxDynamicFormModule } from '@elemental-concept/ngx-dynamic-form';\n\n@NgModule({\n imports: [\n NgxDynamicFormModule,\n ]\n})\nclass SomeModule {\n}\n```\n\n## Usage\n\nThe library provides `DynamicFormComponent` and `DynamicFormFactoryService` to generate forms in run-time. In most\ncases `DynamicFormComponent` should be used directly. `DynamicFormFactoryService` can be used to create a completely\ncustom solution when supplied component is not enough.\n\n`DynamicFormComponent` expects form configuration, form value and optional input component mapping. Form configuration\ndescribes all fields, their labels, validations, etc in a simple format. Value is a regular key-value map as used\nby `FormGroup`. `DynamicFormComponent` also provides a set of events for application to react to data and state changes.\nAdditionally, custom HTML can be placed inside the form if needed.\n\n### Simple Example\n\n```angular2html\n\n\n```\n\n```typescript\n// my-form.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'my-form',\n templateUrl: './my-form.component.html',\n styleUrls: [ './my-form.component.scss' ]\n})\nexport class MyFormComponent {\n config = {\n elements: [\n {\n id: 'firstName',\n label: 'First name',\n type: 'string',\n validators: [ { type: 'required' } ]\n },\n {\n id: 'lastName',\n label: 'Last name',\n type: 'string',\n validators: [ { type: 'required' } ]\n }\n ]\n };\n\n value = {\n firstName: 'John',\n lastName: 'Doe'\n };\n}\n```\n\n### Adding Custom HTML To The Form\n\n`DynamicFormComponent` has 4 content slots which can be used to annotate and decorate the form according to the design.\nOne of these slots should also contain submit button if required. Slots are specified by CSS classes:\n\n* `before-form` - content will be placed befor `\n\n
Terms and conditions.
\n```\n\n## API\n\n### DynamicFormComponent\n\n`@Input config: DynamicFormConfig`\n\nRequired. Specifies a configuration of input fields and related data. Please check `DynamicFormConfig` section for more\ninfo.\n\n`@Input value: { [ key: string ]: any }`\n\nRequired. Value of the form. Can be an empty object `{}`.\n\n`@Input componentMap: DynamicFormComponentMap`\n\nMapping between textual input types like `string` and `checkbox` to actual Angular components. This mapping should be\nprovided either by component library like *Material Components For Dynamic Form* or by the app developer manually.\nCheck `DynamicFormComponentMap` section for more info.\n\n`@Output valueChanges: EventEmitter`\n\nFires an event each time there are any changes to a form value.\n\n`@Output statusChanges: EventEmitter`\n\nFires an event each time there are any status changes to a form.\n\n`@Output formSubmit: EventEmitter`\n\nFires an event when the user submits the form.\n\n### DynamicFormConfig\n\nThis is where all the magic happens. This configuration allows developers to describe forms of varying complexities to\nsuit most needs. Each form element describes basic attributes like id and label as well as validations, relationships\nbetween different form elements, error messages, etc. `M` describes meta information format used by the chosen set of\ncomponents. Meta information allows for additional input component customisation, like CSS classes, etc.\n\n```typescript\ninterface DynamicFormConfig {\n elements: DynamicFormElement[];\n\n endpoint?: string;\n}\n\ninterface DynamicFormElement {\n id: string;\n label: string;\n type: '_description_' | string;\n\n placeholder?: string;\n meta?: M;\n options?: DynamicFormElementOption[];\n dependsOn?: DynamicFormElementRelationship[];\n validators?: DynamicFormValidator[];\n errors?: DynamicFormErrors;\n}\n```\n\nRequired attributes:\n\n* `id` - unique ID of a form field, for example, `password` or `email`.\n* `label` - label to show next to the form field. Exact location and presentation of the label will depend on form\n component library.\n* `type` - type of form field. Types depend on a form component library. `Dynamic Form` does not care about types at all\n as it does not render the final HTML into the view.\n\nOptional attributes:\n\n* `placeholder` - can be used by a component library to display a placeholder when form field value is empty.\n* `meta` - a set of meta attributes which are passed directly to a component library without any modifications. Meta\n handling is completely dependent on a component library.\n* `options` - list of possible values for a form field. Behaviour depends on a component library.\n* `dependsOn` - list of dependencies which control when form field will be visible. For example, a text input field\n might only appear when a check box is selected. `dependsOn` allows you to express such behaviour.\n* `validators` - a set of Angular form validators to be applied to a form field.\n* `errors` - a set of error messages to show when validations fail.\n\nExample:\n\n```typescript\n{\n elements: [\n {\n id: 'firstName',\n label: 'First name',\n type: 'string',\n validators: [ { type: 'required' } ]\n },\n {\n id: 'lastName',\n label: 'Last name',\n type: 'string',\n validators: [ { type: 'required' } ]\n }\n ]\n}\n```\n\n### DynamicFormElementOption\n\n```typescript\ninterface DynamicFormElementOption {\n label: string;\n value: any;\n}\n```\n\n* `label` - label of an option visible to the end user.\n* `value` - value of an option which will be assigned to the form field when a user selects it.\n\n### DynamicFormElementRelationship\n\n`Dynamic Form` allows specifying basic relationships between form fields. All relationships in a set are merged\nwith `AND` logical operation. Five operations are available:\n\n* `equals`\n* `lessThan`\n* `moreThan`\n* `set`\n* `notSet`\n\nExample\n\n```typescript\n{\n elements: [\n {\n id: 'subscribe',\n label: 'Do you wish to subscribe to our newsletter?',\n type: 'checkbox'\n },\n {\n id: 'email',\n label: 'Your e-mail for newsletter subscription',\n type: 'email',\n validators: [ { type: 'email' } ],\n dependsOn: [ { id: 'subscribe', type: 'set' } ]\n }\n ]\n}\n```\n\nIn this example `email` field will only be presented to the user when check box `subscribe` is checked.\n\nComplete interface reference:\n\n```typescript\ninterface DynamicFormElementRelationshipCommon {\n id: string;\n}\n\ninterface DynamicFormElementRelationshipEquals extends DynamicFormElementRelationshipCommon {\n type: 'equals';\n value: any;\n}\n\ninterface DynamicFormElementRelationshipLessThan extends DynamicFormElementRelationshipCommon {\n type: 'lessThan';\n value: number;\n}\n\ninterface DynamicFormElementRelationshipMoreThan extends DynamicFormElementRelationshipCommon {\n type: 'moreThan';\n value: number;\n}\n\ninterface DynamicFormElementRelationshipIsSet extends DynamicFormElementRelationshipCommon {\n type: 'set';\n}\n\ninterface DynamicFormElementRelationshipIsNotSet extends DynamicFormElementRelationshipCommon {\n type: 'notSet';\n}\n\ntype DynamicFormElementRelationship =\n DynamicFormElementRelationshipEquals |\n DynamicFormElementRelationshipLessThan |\n DynamicFormElementRelationshipMoreThan |\n DynamicFormElementRelationshipIsSet |\n DynamicFormElementRelationshipIsNotSet;\n```\n\n### DynamicFormValidator\n\nDescribes an Angular form validator to be assigned to a form field. It's just one-to-one mapping to existing validators.\nCustom validators are not supported yet.\n\nExample:\n\n```typescript\n{\n elements: [\n {\n id: 'email',\n label: 'E-mail',\n type: 'email',\n validators: [ { type: 'required' }, { type: 'email' } ]\n }\n ]\n}\n```\n\nThis is equal to:\n\n```typescript\nnew FormGroup({\n email: new FormControl('', [ Validators.required, Validators.email ])\n});\n```\n\nComplete interface reference:\n\n```typescript\ninterface DynamicFormValidatorMin {\n type: 'min';\n value: number;\n}\n\ninterface DynamicFormValidatorMax {\n type: 'max';\n value: number;\n}\n\ninterface DynamicFormValidatorRequired {\n type: 'required';\n}\n\ninterface DynamicFormValidatorRequiredTrue {\n type: 'requiredTrue';\n}\n\ninterface DynamicFormValidatorEmail {\n type: 'email';\n}\n\ninterface DynamicFormValidatorMinLength {\n type: 'minLength';\n length: number;\n}\n\ninterface DynamicFormValidatorMaxLength {\n type: 'maxLength';\n length: number;\n}\n\ninterface DynamicFormValidatorPattern {\n type: 'pattern';\n pattern: string;\n}\n\nexport interface DynamicFormValidatorEqualTo {\n type: 'equalTo';\n field: string;\n}\n\ntype DynamicFormValidator =\n DynamicFormValidatorMin |\n DynamicFormValidatorMax |\n DynamicFormValidatorRequired |\n DynamicFormValidatorRequiredTrue |\n DynamicFormValidatorEmail |\n DynamicFormValidatorPattern |\n DynamicFormValidatorEqualTo;\n```\n\n### DynamicFormErrors\n\n```typescript\ninterface DynamicFormErrors {\n [ key: string ]: string;\n}\n```\n\nA simple key-value map between error codes and their messages.\n\n## Creating Custom Input Components\n\nThis section is not finished yet. Please check the source code in the sample app on how it's done as well as\n*Material Components For Dynamic Form* mentioned earlier.\n","readmeFilename":"README.md"}