{"id":22568447,"url":"https://github.com/nullrefexcep/angularformus","last_synced_at":"2025-04-10T12:34:36.237Z","repository":{"id":19657306,"uuid":"22910229","full_name":"NullRefExcep/AngularFormus","owner":"NullRefExcep","description":"Form generator for AngularJS","archived":false,"fork":false,"pushed_at":"2015-02-19T21:27:26.000Z","size":1075,"stargazers_count":15,"open_issues_count":4,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-07T22:13:52.985Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://nullrefexcep.github.io/AngularFormus","language":"JavaScript","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/NullRefExcep.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":"2014-08-13T09:28:05.000Z","updated_at":"2020-08-04T08:03:53.000Z","dependencies_parsed_at":"2022-08-24T02:50:49.046Z","dependency_job_id":null,"html_url":"https://github.com/NullRefExcep/AngularFormus","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullRefExcep%2FAngularFormus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullRefExcep%2FAngularFormus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullRefExcep%2FAngularFormus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NullRefExcep%2FAngularFormus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NullRefExcep","download_url":"https://codeload.github.com/NullRefExcep/AngularFormus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217146,"owners_count":21066633,"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-12-08T00:13:14.680Z","updated_at":"2025-04-10T12:34:36.196Z","avatar_url":"https://github.com/NullRefExcep.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularFormus\n[![Bower version](https://img.shields.io/badge/bower-v0.0.6-brightgreen.svg)](https://github.com/NullRefExcep/AngularFormus/releases)\n[![MIT License](https://img.shields.io/badge/license-MIT-green.svg)](https://tldrlegal.com/license/mit-license)\n\nCustomizable and extensible forms generator for AngularJS. License under MIT License.\n## Usage\nForm directive render form by configuration:\n```html\n\u003cformus-form name=\"form.name\" \n    model=\"form.data\" \n    fieldsets=\"form.fieldsets\" \n    config=\"form.config\"\u003e\n\u003c/formus-form\u003e\n```\n### Install\n```\n$ bower install -S angular-formus\n```\nAdd a `\u003cscript\u003e` to your `index.html`:\n```html\n\u003cscript src=\"/bower_components/angular-formus/dist/formus.min.js\"\u003e\u003c/script\u003e\n```\nand add Formus module as dependency to Your application:\n```js\nangular.module('app', ['formus']);\n```\n\n### Form configuration\n\nExample:\n```js\nform = {\n    name: \"systemParametersForm\",\n    fieldsets: {\n        fields: [{\n            \"name\": \"movePayments\",\n            \"label\": \"Move Payments Straight To Cash\",\n            \"input\": \"checkbox\"\n        }, {\n            \"name\": \"cancelPendingAfter\",\n            \"label\": \"Automatically Cancel Pending Mode Bookings after\",\n            \"input\": \"textbox\",\n            \"suffix\": \"days\"\n        }]\n    },\n    config: {\n        class: 'some-css-class',\n        submit: {\n            title: 'Save',\n            handler: function() {\n                console.log('I\\'m submitted');\n            }\n        }\n    }\n}\n```\n### Field configuration\nForm must has one general field, which contain others fields.\nExample of field declaration:\n```js\n{\n  name:'nameOfFieldInModel', // string\n  label: 'label', // string\n  fields: [] //array of objects\n  input:'typeOfInput' // string \n}\n```\nFields can contain nested fields.\nAll field attributes are optional except `input`.\nIf attribute `name` isn't set, that field must contain nested fields (attribute `fields`).\nYou can add custom attributes, they are available in view at object config.\nLinker can be overriden. E.g:\n```js\n{\n  name:'name',\n  linker:function($scope, $element, $attr, $http /**Some other services**){}\n}\n```\n\n### Available inputs \n- fieldset (container for other fields)\n- textbox\n- texarea\n- select\n- checkbox \n- radio \n- checklist\n\n### Customization\n\nFormus supports customization of all module elements.\n\n#### Templates\n\nTo change input template just register it in `FormusTemplatesProvider`:\n```js\napp.config(['FormusTemplatesProvider', function (FormusTemplatesProvider) {\n  FormusTemplatesProvider.setTemplateUrl('color', 'views/formus/inputs/color.html');\n  FormusTemplatesProvider.setTemplateUrl('group', 'views/formus/inputs/group.html');\n  FormusTemplatesProvider.setTemplateUrl('file', 'views/formus/inputs/file.html');\n  FormusTemplatesProvider.setTemplateUrl('gallery', 'views/formus/inputs/gallery.html');\n}]);\n```\n\n#### Validation\nFormus supports data validation. Validators can be attached to every field.\n```js\n{\n  name: 'title',\n  input: 'textbox',\n  validators: {\n    required: true /** Key - validator name, Value - options **/\n  }\n}\n``` \nAvailable validators is contained in `FormusValidator` service.\nExample of adding custom validator:\n```js\napp.config(['FormusValidatorProvider', function (FormusValidatorProvider) {\n  FormusValidatorProvider.set('numeric', function (value, config, arg) {\n    if (value) {\n      if (!tools.validateNumerical(value)) {\n        return config.label + ' must be numerical';\n      }\n      if (typeof(arg) === 'object') {\n        if ((angular.isDefined(arg.min)) \u0026\u0026 (value \u003c arg.min)) {\n          return config.label + ' must be \u003e ' + arg.min;\n        }\n      }\n    }\n    return null;\n  });\n}]);\n```\nValidator function is called by $injector and has three special parameters:\n- `value` - field value\n- `config` - field config\n- `args` - validator options\n\nThis validator can take options as object with property `min`, e.g:\n```js\nvalidators: {numeric: {min:0}}\n```\nAvailable validators: \n- required\n- email\n- url\n\n##### Events\nFormus emit an event after validation:\n```js\n$rootScope.$on('Formus.validatedForm', function(event, name, isValid) {\n  /*Some stuff*/\n});\n``` \nTo validate form without submit:\n```js\n$rootScope.$broadcast('Formus.validateForm', 'myFormName');\n```\n\n#### Display back-end errors\nFor showing errors that return from server you can use attribute `errors` in `formus-form` directive.\nErrors must be object with properties named as form fields and errors it's array of strings, e.g: \n```js\n{\n  name:['Name must be longer']\n}\n```\n`FormusHelper` has special method for extracting errors from response.\nExample of setting errors:\n```js\nform.config.submit.handler = function() {\n  return save().then(function() {\n     $state.go('^.list');\n  }).catch(function(response) {\n    form.errors = FormusHelper.extractBackendErrors(response);\n  });\n};\n```\n\nAll methods of `FormusHelper` can be overridden, e.g:\n```js\napp.config(['FormusHelperProvider', function(FormusHelperProvider) {\n    FormusHelperProvider.setMethod('nameOfMethod', function() {\n        /* Implementation */\n    });\n}]);\n```\n\n\n#### Default Configurations\n\n`FormusConfig` service allows to set default configurations for every type of input.\nSetter take two params:\n- name of filed\n- callback which must return config object\n\n```js\napp.config(['FormusConfigProvider', function (FormusConfigProvider) {\n  FormusConfigProvider.set('datetime', function () {\n    return {\n      minView: 0,\n      startView: 0,\n      dataType: 'number',\n      dateFormat: 'shortDate'\n    }\n  });\n}]);\n```\n\n### Features\n\n#### Nested fields:\n\nYou can create form with nested fields:\n```js\nform = {\n    fieldsets: {\n        fields: [\n            {\"name\": \"val0\", \"label\": \"Text Value\", \"input\": \"checkbox\"},\n            {\"name\": \"someExtend\", \"fields\": [\n                    {\"name\": \"val1\", \"label\": \"Nested Value #1\", \"input\": \"textbox\"},\n                    {\"name\": \"val2\", \"label\": \"Nested Value #2\", \"input\": \"select\",\"items\":  [\n                            {\"value\":1, \"title\":\"opt 1\"},\n                            {\"value\":2, \"title\":\"opt 2\"}\n                        ]\n                    },\n                ]\n            }\n        ]\n    }\n};\n```\nAs result get model:\n```js\n{\n    val0: true,\n    someExtend:{\n        val1: 'some text',\n        val2: 2\n    }\n}\n\n```\nYou can use dot notation:\n```js\nform = {\n    fieldsets: {\n        fields: [\n            {\"name\": \"base.first\", \"label\": \"Some Value\", \"input\": \"textbox\"},\n            {\"name\": \"base.second\", \"label\": \"Some Value#2\", \"input\": \"textbox\"},\n            {\"name\": \"other.value\", \"label\": \"Some Value#3\", \"input\": \"checkbox\"},\n        ]\n    }\n};\n```\nResult model:\n```js\n{\n    base:{\n        first: 'text val',\n        first: 'text val2',\n    },\n    other:{\n        value: false\n    }\n}\n```\n\n#### Forms Container\n\nFor comfortable work with large number of forms you can use `FormusContainer`.\nThis service provide global storage for form configs.\nConfiguration:\n```js\nvar formsConfiguration = {form1:{/**...**/}, form2:{/**...**/}};\napp.constant('FORMS_CONFIG', formsConfiguration);\n\napp.config(['FormusContainerProvider', 'FORMS_CONFIG', function (FormusContainerProvider, FORMS_CONFIG) {\n  FormusContainerProvider.setContainer(FORMS_CONFIG);\n}]);\n```\nAfter configuration you can use `FormusContainer` in controller:\n```js\nvar myCtrl = function($scope, FormusContainer){\n    $scope.form = FormusContainer.get('form1');\n}\n```\nDefault configuration of form can be set using `FormusConfig`.\n```js\napp.config(['FormusConfigProvider', function (FormusConfigProvider) {\n  FormusConfigProvider.set('form', function () {\n    return {\n        name: 'default-name',\n        fieldset: { fields: [] },\n        data: {},\n        config: {\n            buttons: [],\n            submit: { title: 'Save', handler: function() {} }\n        }\n    }\n  });\n}]);\n```\nTo extend a form configuration you can specify attribute `parent`. Formus will search container for form with that name and use its configuration.\n```js\n{\n    //form containter\n    parent: {\n        config:{\n            submit:{title:'Find'}\n        }\n    },\n    child: {\n        parent:'parent'\n    }\n}\n```\n\n#### Linkers\n\nYou can set custom linkers for special input types:\n```js\napp.config(['FormusLinkerProvider', function (FormusLinkerProvider) {\n    FormusLinkerProvider.setLinker('gallery', function ($scope, $element, fileUpload) {\n        $scope.uploadImage = function () {\n          if (fileUpload.isValid($element.find('.imgFileInput'))) {\n            alert('Select file');\n          } else {\n            fileUpload.upload($element.find('.imgFileInput')).then(function (response) {\n              $scope.model.push(response.data.url);\n            });\n          }\n        };\n        $scope.removeImage = function (index) {\n          $scope.model.splice(index, 1);\n        };\n        $scope.afterLoadTemplate = function () {\n          if (!Array.isArray($scope.model)) {\n            $scope.model = [];\n          }\n        }\n    });\n}]);\n```\n#### Wrapper\n\nEvery field in form is wrapped in special directive, it name `formusWrapper`.\nIs possible to override it template by using `FormusTemplates` service:\n```js\napp.config(['FormusTemplatesProvider', function (FormusTemplatesProvider) {\n  FormusTemplatesProvider.setTemplateUrl('wrapper', 'views/formus/inputs/my-custm-wrapper.html');\n}]);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullrefexcep%2Fangularformus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnullrefexcep%2Fangularformus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullrefexcep%2Fangularformus/lists"}