{"id":20851343,"url":"https://github.com/velascoandres/ez-forms","last_synced_at":"2026-04-19T21:33:35.987Z","repository":{"id":38663462,"uuid":"218127047","full_name":"velascoandres/ez-forms","owner":"velascoandres","description":"An awesome library for Angular to create reactive forms from a configuration file.  For the moment it supports angular material and bootstrap style frameworks.","archived":false,"fork":false,"pushed_at":"2023-01-07T11:10:31.000Z","size":2481,"stargazers_count":2,"open_issues_count":23,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-08T16:55:07.711Z","etag":null,"topics":["angular","package","reactive-forms","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/velascoandres.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-28T19:18:45.000Z","updated_at":"2021-06-10T17:02:41.000Z","dependencies_parsed_at":"2023-02-07T00:16:36.775Z","dependency_job_id":null,"html_url":"https://github.com/velascoandres/ez-forms","commit_stats":null,"previous_names":["velascoandrs/ez-forms"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/velascoandres/ez-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velascoandres%2Fez-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velascoandres%2Fez-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velascoandres%2Fez-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velascoandres%2Fez-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/velascoandres","download_url":"https://codeload.github.com/velascoandres/ez-forms/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velascoandres%2Fez-forms/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28038773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","package","reactive-forms","typescript"],"created_at":"2024-11-18T03:13:20.771Z","updated_at":"2025-12-25T22:11:22.704Z","avatar_url":"https://github.com/velascoandres.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ez-form  \n## Index  \n1. [Description](#description)  \n2. [Install](#install)  \n3. [Usage](#usage)\n     \n     3.1  [Files](#file)\n     \n     3.2  [Multiple files](#multiple-files)\n     \n     3.3  [Autocomplete](#autocomplete)\n     \n     3.4  [Toaster](#toaster)  \n     \n     3.5  [Bootstrap](#bootstrap)\n     \n     3.6  [Animations](#animations)\n     \n4. [Summary](#summary)     \n\n5. [Especial Thanks](#especial-thanks)  \n\n## Description  \n`ez-form` is a component that allows create reactive forms for angular 2+. \n\n``This library makes use of angular material, bocd otstrap and PrimeNG libraries and \ncomponents ``\n   \n## Install  \n* Install the package:   \n  \n```shell script  \n    $ npm i @gordon_freeman/ez-form  \n```  \n\n \u003eYou must have bootstrap  installed in your angular project\n  \n* Import `EzFormModule`\n  \n```typescript  \n    @NgModule({  \n      declarations: [  \n        AppComponent  \n      ],  \n      imports: [  \n        EzFormModule,  \n      ],  \n      providers: [],  \n      bootstrap: [AppComponent]  \n    })  \n```\n\n## Usage  \nFirst we need a config object inside of parent component.\n\nFor example: we need to create a form with the following fields:\n* UUID: `Disabled` input (Optional)\n```typescript\n     uuidField: InputTextFieldInterface = {\n       controlName: 'uuid',\n       type: {\n         typeName: 'input-text'\n       },\n       disabled: true,\n     };\n```\n* Password: `Password` input (Required)\n```typescript\n      passwordField: InputTextFieldInterface = {\n        controlName: 'password',\n        type: {\n          typeName: 'input-text',\n          class: 'password',\n        },\n        validators: [\n          Validators.required,\n        ]\n      };\n```\n* Brithday: `Date` input (Required)\n```typescript\n  birthdayField: DateFieldInterface = {\n    controlName: 'birthday',\n    placeholder: 'Enter your birthday date',\n    hint: 'Enter a valid date',\n    type: {\n      typeName: 'date'\n    },\n    validators: [\n      Validators.required,\n    ]\n  };\n```\n* Address: `Long text` input (Required)\n```typescript\n  addressField: TextAreaFieldInterface = {\n    controlName: 'address',\n    label: 'Address',\n    placeholder: 'Enter a complete address',\n    type: {\n      typeName: 'textArea',\n      maxLength: 20,\n    },\n    validators: [\n      Validators.required,\n    ],\n  };\n```\n* Email: `Text` input (Required, Email Validation)\n```typescript\n  emailField: InputTextFieldInterface = {\n    controlName: 'email',\n    validators: [\n      Validators.required,\n      Validators.email\n    ],\n    placeholder: 'Enter an email',\n    type: {\n      typeName: 'input-text',\n      maxLength: 30,\n    },\n    errorMessages: {\n      required: 'The email is mandatory',\n      email: 'You must enter a valid email',\n    },\n    hint: 'Enter a valid email'\n  };\n```\n* Civil State: `Select` input (Required)\n```typescript\n  civilStateField: SimpleSelectFieldInterface = {\n    controlName: 'civilState',\n    placeholder: 'Choose a civil state',\n    label: 'Civil state',\n    hint: 'Please pick a Civil State',\n    validators: [\n      Validators.required\n    ],\n    type: {\n      typeName: 'select',\n      options: [\n        {\n          value: 1,\n          label: 'Married'\n        },\n        {\n          value: 2,\n          label: 'Single'\n        }\n      ]\n    },\n  };\n```\n* Cities: `Multiple Select` input  (Required, minimum 2)\n```typescript\n  citiesField: CheckFieldInterface = {\n    controlName: 'cities',\n    type: {\n      typeName: 'check',\n      minRequired: 2,\n      options: [\n        {\n          value: 1,\n          label: 'Quito'\n        },\n        {\n          value: 2,\n          label: 'Cuenca'\n        },\n        {\n          value: 3,\n          label: 'Ambato'\n        }\n      ]\n    },\n    label: 'Cities',\n    errorMessages: {\n      required: 'select two cities at least',\n    }\n  };\n```\n* Favorite Fruit: `Radio Button` input  (Required)\n```typescript\n          favoriteFruitField: RadioFieldInterface = {\n            controlName: 'favoriteFruit',\n            validators: [\n              Validators.required\n            ],\n            label: 'Favorite Fruit',\n            type: {\n              typeName: 'radio',\n              options: [\n                {\n                  value: 3,\n                  label: 'Apple'\n                },\n                {\n                  value: 1,\n                  label: 'Pear'\n                },\n                {\n                  value: 2,\n                  label: 'Pineapple'\n                }\n              ],\n            },\n          };\n```\n* Profile Picture: `File` input (Accept images only)\n```typescript\n  profilePictureField: FileFieldInterface = {\n    controlName: 'profilePicture',\n    label: 'Profile Picture',\n    hint: 'Please upload your profile picture',\n    placeholder: 'Add your profile picture',\n    validators: [\n      Validators.required,\n      FileValidator.extensions(['jpg']),\n      FileValidator.minSize(100),\n      FileValidator.maxSize(500),\n    ],\n    errorMessages: {\n      required: 'Mandatory File',\n      fileExtension: 'Please select a jpg file',\n      fileMinSize: 'File size must be above of 100 kilobytes',\n      fileMaxSize: 'File size is larger than 500 kilobytes'\n    },\n    type: {\n      typeName: 'file',\n      multiple: false,\n      accept: 'image/*',\n      showFile: true,\n    },\n  };\n```\n\n* someFields: `File` input (Multiple)\n  * Validators: Required, minSize, maxSize, file extension.\n```typescript\n  someFilesField: FileFieldInterface = {\n      controlName: 'someFiles',\n      label: 'Pictures',\n      hint: 'Please upload your files',\n      placeholder: 'Add Files',\n      validators: [\n        Validators.required,\n        FileValidator.extensions(['png']),\n        FileValidator.maxSize(500),\n      ],\n      errorMessages: {\n        fileExtension: 'Please select png files only',\n        required: 'Mandatory File',\n        fileMaxSize: 'File size is larger than 500 kilobytes'\n      },\n      type: {\n        typeName: 'file',\n        multiple: true,\n        accept: '*/*',\n        showFile: true,\n        tableHeaders: {\n          actions: 'Operations',\n          description: 'Entry Files'\n        }\n      },\n    };\n```\nAll fields must be at a config array like this in our parent component, for example: \n\n### `parentComponent.ts`\n\n```typescript  \nmyConfiguration: PrincipalFormFieldInterface[] = [\n    this.uuidField,\n    this.passwordField,\n    this.birthdayField,\n    this.addressField,\n    this.emailField,\n    this.civilStateField,\n    this.citiesField,\n    this.favoriteFruitField,\n    this.profilePictureField,\n    this.someFilesField,\n  ];\n```  \n  \nSo in our `parentComponent.html` call the component.\n\n  \n```html  \n    \u003cez-form\n            [formConfig]=\"myConfiguration\"\n          \u003e\n          \u003cbutton [disabled]=\"!usuario\" class=\"btn btn-block btn-info\"\u003eSubmit\u003c/button\u003e\n    \u003c/ez-form\u003e\n```  \n  \n  \nIf we want our form to be filled with default values. We need to declare a object with the controls name as keys example:  \n\n```typescript  \n    userData = {\n        uuid: 1234,\n        email: 'juan.pecados@mail.com',\n        civilState: 1,\n        otherDate: '2015-02-16',\n        birthday: '1999-02-16',\n        favoriteFruit: 1,\n        cities: [1, 3],\n        password: '12133',\n      };\n```  \n  \nTemplate `parentComponent.html`:  \n\n  \n```html  \n    \u003cez-form\n            [formConfig]=\"myConfiguration\"\n            [inputData]=\"userData\"\n          \u003e\n          \u003cbutton [disabled]=\"!usuario\" class=\"btn btn-block btn-info\"\u003eSubmit\u003c/button\u003e\n    \u003c/ez-form\u003e\n```  \n  \n\nThe form has an `Output` where you will return the form data or an` undefined` depending\nIf the form has been filled out correctly.\n\nSo we need to make use of the Output : `dataFromForm`\"\n    \n```html  \n    \u003cez-form   \n            [formConfig]=\"myConfiguration\"  \n            [inputData]=\"userData\"  \n            (dataFromForm)=\"someFunction($event)\"  \n            \u003e  \n         \u003cbutton (click)=\"someFunction()\"\u003eSubmit\u003c/button\u003e  \n     \u003c/ez-form\u003e  \n```  \nResults:   \n  \n![formulario](https://github.com/velascoandrs/repo-de-imagenes/blob/master/version-en/form-valid-mat.PNG?raw=true)  \n\n## File\n\n## Multiple Files\n![files](https://github.com/velascoandrs/repo-de-imagenes/blob/master/archivos/multiple-files.PNG?raw=true)\n\n\n## Autocomplete\n\nParent component typescript code:\n\n```typescript\n    articleField: AutoCompleteFieldInterface = {\n        controlName: 'article',\n        validators: [\n          Validators.required\n        ],\n        label: 'Wikipedia article',\n        placeholder: 'Example: DNA',\n        type: {\n          typeName: 'autoComplete',\n          completeMethod: this.filterWikipediaArticleByTitle,\n          showAttribute: 'title',\n          componentReference: this,\n        },\n        errorMessages: {\n          required: 'The article is mandatory',\n        },\n        hint: 'Search an article'\n      };\n\n    filterWikipediaArticleByTitle(event, contexto) {\n        return contexto._wikipediaService.find(event.query ? event.query : event);\n      }\n```\n### About filter method\n```text\n    The filter service methond must return an observable. If you need format the data from the API, \n    you should use the `pipe` operator.\n```\nThe `find` method code in wikipedia service:\n```typescript\n    find(query: string): Observable\u003cany\u003e {\n        const url = `${this.url}\u0026srsearch=${query}`;\n        return this._httpClient.get(url)\n        .pipe(\n          mergeMap(\n            (response: any) =\u003e {\n              if (response.query) {\n                return of(response.query.search);\n              }\n              return of([]);\n            }\n          )\n        );\n      }\n```\n\n### Results\n* Material\n\n![autocomplete-material](https://github.com/velascoandrs/repo-de-imagenes/blob/master/autocomplete/material.PNG?raw=true)\n\n* PRIMENG\n```text\nI put the PRIMENG autocomplete into bootstrap mode since the boostrap framework does not have an autocomplete component.\n\n```\n![autocomplete-primeng](https://github.com/velascoandrs/repo-de-imagenes/blob/master/autocomplete/primeng.PNG?raw=true)\n\n## Toaster\nThis library makes use of [angular2-toaster](https://www.npmjs.com/package/angular2-toaster)\n* The toaster is the message which shows on screen when the form has been filled correctly or incorrectly.\n* The display of this messages could be optional\n\nWe need to make use of the following Input : `showToaster`\"\n\n\n```html\n\u003cez-form\n        [formConfig]=\"myConfiguration\"\n        [inputData]=\"userData\"\n        [showToaster]=\"false\"\n      \u003e ... \n```\nAlso we could config the messages that will show on the toaster:\n```typescript\n    myToasterConfig = {\n        success: {\n          type: 'info',\n          title: 'GOOD',\n          body: 'All right!!'\n        },\n        fail: {\n          type: 'warning',\n          title: 'BAD',\n          body: 'Someting was wrong!!'\n        }\n      };\n```    \nUse the input : `toasterConfig`\"\n\n\n```html  \n    \u003cez-form\n            [formConfig]=\"myConfiguration\"\n            [inputData]=\"userData\"\n            [toasterConfig]=\"myToasterConfig\"\n          \u003e...\n```\nResults: \n\n![formulario](https://github.com/velascoandrs/repo-de-imagenes/blob/master/version-en/form-invalid-mat-ctoat.PNG?raw=true)\n\n### Bootstrap\nBy Deault the ez-form component loads its internal components from `Angular Material`.\n* If you want make use of bootstrap components:\n\nUse the Input : `styleFramework`\"\n\n```html\n    \u003cez-form\n            [formConfig]=\"myConfiguration\"\n            [inputData]=\"userData\"\n            [styleFramework]=\"'material'\"\n          \u003e..\n```\n\n## Results\n\n![resultadoBootstrap](https://github.com/velascoandrs/repo-de-imagenes/blob/master/version-en/form-invalid-bs.PNG?raw=true)\n\n\n### Animations\nThe error messages animations for every form field could be modify, so we need to make use of [animate.css\n](https://www.npmjs.com/package/animate.css?activeTab=versions). \n\nUse the Input : `msgErrorAnimation`:\n\n```html\n\u003cez-form\n        [formConfig]=\"myConfiguration\"\n        [inputData]=\"userData\"\n        [msgErrorAnimation]=\"'fadeInLeft'\"\n      \u003e\n```\n\nComplete example form component:\n```html\n    \u003cez-form\n            [formConfig]=\"myConfiguration\"\n            [inputData]=\"userData\"\n            (dataFromForm)=\"someFunction($event)\"\n            [styleFramework]=\"'material'\"\n            [msgErrorAnimation]=\"'fadeInLeft'\"\n            [toasterConfig]=\"myToasterConfig\"\n          \u003e\n            \u003cbutton [disabled]=\"!userData\" class=\"btn btn-block btn-info\"\u003eSubmit\u003c/button\u003e\n          \u003c/ez-form\u003e\n```\n\n## Summary\n#### Component\n\n|Attribute  | Type | Description | Required |\n| --- | --- | ---| --- |\n| formConfig | Input | Form config object | YES |\n| inputData | Input | Form default values object | OPTIONAL\n| dataFromForm | OutPut | Data returned from form | YES\n| styleFramework | Input | Form style | OPTIONAL\n| msgErrorAnimation | Input | Error message animation | OPTIONAL\n| toasterConfig | Input | Toaster message configuration object | OPTIONAL\n| showToaster | Input | Show Toaster message | OPTIONAL\n| fullWidth | Input | Full width of each form fields | OPTIONAL\n\n### Control Object\n|Attribute  | Description | Required |\n| --- | ---| --- |\n| controlName | Form Control name | YES\n| placeholder | Describes the expected value of an input field  | OPTIONAL\n| hint | Hint displayed in the input field before the user enters a value | OPTIONAL\n| label | Hint displayed in the input field before the user enters a value | OPTIONAL\n| type | Input type object: select, input, file, check.. | YES\n| validators | Array with angular form validators, it doesn't work with check type | OPTIONAL\n\n### Type Attribute Object\n\n\n|Attribute | Description |\n| --- | ---|\n| input | Input field for text and numbers |\n| typename | type name: input, select, radio, check, textarea, date, file |\n| class | Uniquely for input type. Defines the character type for example a `password` field\n| options | Uniquely for select, radio, check\n| minRequired | Uniquely for check. Defines how many checks fields are mandatory\n| maxLength | Uniquely for input, textarea and date. Defines how many characters are allowed\n| showFile | Uniquely for file. Default `false`. Show file or files preview.\n\n\n### Example Full Code\nIf you are looking for a full example of this library please check the following [github repository](https://github.com/velascoandrs/ez-form-example)\n\n\n# Especial Thanks\n\n* [Angular Material](https://material.angular.io/)\n* [PrimeNG](https://primefaces.org/primeng/#/)\n* [Bootstrap](https://getbootstrap.com/)\n* [Animate.css](https://daneden.github.io/animate.css/)\n* [angular2-toaster](https://www.npmjs.com/package/angular2-toaster)\n* [Pexels](https://www.pexels.com/)\n* [chart.js](https://www.chartjs.org/) \n* [Quill](https://quilljs.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvelascoandres%2Fez-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvelascoandres%2Fez-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvelascoandres%2Fez-forms/lists"}