{"id":18512400,"url":"https://github.com/flauc/angular2-easy-forms","last_synced_at":"2025-04-09T05:33:14.722Z","repository":{"id":57179542,"uuid":"58572947","full_name":"flauc/angular2-easy-forms","owner":"flauc","description":"Easy Forms is a library for simplification of forms in Angular 2. Its meant for quick creation of forms and form validation.","archived":false,"fork":false,"pushed_at":"2016-10-02T10:13:10.000Z","size":3359,"stargazers_count":34,"open_issues_count":7,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T00:05:00.043Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://flauc.github.io/angular2-easy-forms/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flauc.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":"2016-05-11T19:04:52.000Z","updated_at":"2024-07-27T06:50:11.000Z","dependencies_parsed_at":"2022-09-14T02:10:34.384Z","dependency_job_id":null,"html_url":"https://github.com/flauc/angular2-easy-forms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flauc%2Fangular2-easy-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flauc%2Fangular2-easy-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flauc%2Fangular2-easy-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flauc%2Fangular2-easy-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flauc","download_url":"https://codeload.github.com/flauc/angular2-easy-forms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987060,"owners_count":21028891,"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","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":[],"created_at":"2024-11-06T15:34:02.659Z","updated_at":"2025-04-09T05:33:09.711Z","avatar_url":"https://github.com/flauc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 2 Easy Forms\nIs a library for simplification of forms in Angular 2. Its meant for quick creation of forms and form validation.\n\nThe library is inspired by [angular.io dynamic forms](https://angular.io/docs/ts/latest/cookbook/dynamic-form.html).\n\nYou can find a live example [here](http://flauc.github.io/angular2-easy-forms)\n\n## Documentation \n1. [Setup](#setup)\n1. [Questions](#questions)\n1. [Validation](#validation)\n1. [Events](#events)\n1. [Settings](#settings)\n\n## Setup\nYou can install the library from npm with the following command: \n```\nnpm install --save angular2-easy-forms\n```\n\nImport the `EasyFormsModule` in your `app.module`. You also need to have the `FormsModule` imported for the library to work. \n\n```typescript\n@NgModule({\n    imports: [\n        BrowserModule,\n        EasyFormsModule\n    ],\n    providers: [],\n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\nThen you define a list of questions as well as a settings and classes object if required and pass it to the component.\n\n```typescript\n@Component({\n    selector: 'app',\n    template: `\n        \u003ceasy-form [easyFormData]=\"data\" (onSubmit)=\"onSubmit($event)\" (onChanges)=\"onChanges($event)\"\u003e\u003c/easy-form\u003e\n    `\n})\nexport class AppComponent {\n    constructor() {}\n\n    public data = {\n        settings: {\n            submitButtonText: 'Send',\n        },\n        classes: {\n            form: 'some-class',\n            submit: ['class-one', 'class-two']\n        },\n        questions: [\n            {\n                type: 'text',\n                key: 'firstName',\n                value: 'John Doe',\n                label: 'First Name',\n                validation: [\n                    {type: 'required'},\n                    {type: 'minLength', value: 5, message: 'Please enter a name longer then 5 characters'},\n                    {type: 'pattern', value: '^[a-zA-Z ]+$', message: 'Only letters and spaces are allowed'}\n                ]\n            },\n            {\n                type: 'password',\n                key: 'password',\n                label: 'Password',\n                validation: [\n                    {type: 'required'},\n                    {type: 'custom', value: startsWithNumber, message: 'Please dont start with a number'}\n                ]\n            },\n            {\n                type: 'dropdown',\n                key: 'address',\n                label: 'Address',\n                value: 'osijek',\n                order: 2,\n                options: [\n                    {value: 'osijek', name: 'Osijek'},\n                    {value: 'zagreb', name: 'Zagreb'}\n                ]\n            },\n            {\n                type: 'radio',\n                key: 'gender',\n                label: 'Gender',\n                value: 'male',\n                classes: {\n                    'wrapper': 'some-class-for-the-wrapper',\n                    'label': 'label-class',\n                    'question': ['q-class-one', 'q-class-two'],\n                    'error': ['error-one', 'error-two']\n                },\n                options: [\n                    {value: 'male', name: 'Male'},\n                    {value: 'female', name: 'Female'}\n                ]\n            },\n            {\n                type: 'checkbox',\n                key: 'things',\n                label: 'Things You Like',\n                values: ['pokemon', 'starWars'],\n                options: [\n                    {value: 'starWars', name: 'Star Wars'},\n                    {value: 'batlefield', name: 'Batlefield'},\n                    {value: 'pokemon', name: 'Pokemon'}\n                ],\n                validation: [\n                    {type: 'required'}\n                ]\n            }\n        ]\n    };\n\n    onSubmit(event) {\n        console.log(event)\n    }\n\n    onChanges(event) {\n        console.log(event)\n    }\n}\n```\n\nYou can find an example of the setup in the example folder.\n\n### System.js\n\nIf you are using `system.js` you also need to declare the library in your system.js config before you can use it. \n\n```js\nvar map = { 'angular2-easy-forms': 'node_modules/angular2-easy-forms' },\nvar packages = { 'angular2-easy-forms': {main: 'components.js', defaultExtension: 'js'} }\n```\n\n## Questions\nEach question can have the following properties: \n\nproperty | type | required | description \n------------ | ------------- | ------------- | ------------- \ntype | text, password, number, dropdown (select), radio or checkbox | true | Defines the type of the question\nkey | string | true | Defines the key of the control, this is the key of the value that gets emitted [onSubmit](#events) and [onChange](#events) \nlabel | string | false | The label of the form input\nvalue | string or array (if question `type: 'checkbox'` then its an array) | false | An initial value for the question\norder | int | false | Define a specific order for the questions (if one question has an order property to achieve the required effect)\nvalidation | object array | false | Read more about validation [here](#validation)\n\nEach question can also have a classes object with the following properties: \n\nproperty | type | required | description \n------------ | ------------- | ------------- | ------------- \nwrapper | string or string[] | false | Class or list of classes to apply to the question wrapper.\nlabel | string or string[] | false | Class or list of classes to apply to the label. \nquestion | string or string[] | false | Class or list of classes to apply to the question element (input, select or div in case of checkbox or radio types).\nerror | string or string[] | false | Class or list of classes to apply to the error message.\n\nIf you define the type of question to be `radio`, `checkbox` or `dropdown` then you need to define an additional property:\n\nproperty | type | required | description \n------------ | ------------- | ------------- | ------------- \noptions | object array `{value: string, name: string}` | true | Define an array of options for the question\n\n### Example \n\n```js\n{\n    type: 'radio',\n    key: 'gender',\n    label: 'Gender',\n    value: 'male',\n    classes: {\n        'wrapper': 'some-class-for-the-wrapper',\n        'label': 'label-class',\n        'question': ['q-class-one', 'q-class-two'],\n        'error': ['error-one', 'error-two']\n    }\n    options: [\n        {value: 'male', name: 'Male'},\n        {value: 'female', name: 'Female'}\n    ]\n}\n```\n\n## Validation\nYou can optionally set a validation property on any question. The submit button of the form will be disabled if any question is invalid.\n\nThe validation property is an object array with the following format: \n```js\n{\n    type: 'required' | 'minLength' | 'maxLength' | 'pattern' | 'match',\n    value: string | int | function \n    message: string\n}\n```\n\nThe message property is the error message and its optional. Don't add the message property if you don't want to display an error message.\n\nHere are the type properties and there associated values \n\ntype | value | description\n------------ | ------------- | ------------- \n'required' | none | Set the question to be required \n'minLength' | int | Set the required minimum length of the questions value\n'maxLength' | int | Set the required maximum length of the questions value\n'patter' | string (regex patter) | Set the patter that the questions value needs to satisfy\n'custom' | function | You can pass any custom function for validation this way\n'match' | string (key of the question to match against) | This questions value needs to match the assigned questions value\n\n\n## Events\nThere are two events you can bind to: \n* onSubmit\n* onChange\n\nThis is how you bind to them: \n```html\n\u003ceasy-form [easyFormData]=\"data\" (onSubmit)=\"fuFunction($event)\" (onChanges)=\"barFunction($event)\"\u003e\u003c/easy-form\u003e\n```\n\n### onSubmit\nThe onSubmit event emits when the submit button is pressed. The emitted object contains all of the forms questions with their corresponding values `obj[key] = value`. \nIf the questions type is 'checkbox' the emitted value is an array of all the checked\n\n### OnChange\nThe onChange event emits when ever a value changes. The following is what gets emitted: `{[key]: value}`.\nYou can disable a question from triggering the onChange event by setting the `emitChanges` property to `false`.\n\n## Settings\nAlong with the list of questions you can add a settings object to the passed data. \nHere are the possible options: \n\nproperty | type | default | description\n------------ | ------------- | ------------ | ------------\nsubmitButton | boolean | true | Define whether to display the submit button or not\nsubmitButtonText | string | Send | The text of the send button\nshowValidation | boolean | true | Define whether validation errors should be shown or not\nsingleErrorMessage | boolean | true | Defines whether all of the validation errors should be shown or just the last one\nerrorOnDirty | boolean | true | Define if validation errors should appear only when the input is dirty or right away\n\n\nYou can also provide a classes object to add classes to the form wrapper and the submit wrapper: \n```js \nclasses: {\n    // If you want to add a single class pass a string\n    // If you want to add multiple classes pass an array os class names\n    form: string | string[]\n    submit: string | string[]\n}\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflauc%2Fangular2-easy-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflauc%2Fangular2-easy-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflauc%2Fangular2-easy-forms/lists"}