{"id":16431266,"url":"https://github.com/rubencodeforges/ng-forms","last_synced_at":"2025-08-26T16:29:07.926Z","repository":{"id":57103079,"uuid":"125691590","full_name":"rubenCodeforges/ng-forms","owner":"rubenCodeforges","description":"Dynamic reactive forms for Angular","archived":false,"fork":false,"pushed_at":"2019-10-01T13:58:44.000Z","size":11843,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-23T20:03:21.703Z","etag":null,"topics":["angular","angular4","angular5","dynamic-forms","reactive-forms"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rubenCodeforges.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-18T04:11:28.000Z","updated_at":"2019-10-01T13:58:45.000Z","dependencies_parsed_at":"2022-08-20T23:20:40.504Z","dependency_job_id":null,"html_url":"https://github.com/rubenCodeforges/ng-forms","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rubenCodeforges/ng-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2Fng-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2Fng-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2Fng-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2Fng-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubenCodeforges","download_url":"https://codeload.github.com/rubenCodeforges/ng-forms/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenCodeforges%2Fng-forms/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263493381,"owners_count":23475185,"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":["angular","angular4","angular5","dynamic-forms","reactive-forms"],"created_at":"2024-10-11T08:29:37.498Z","updated_at":"2025-07-04T10:34:16.295Z","avatar_url":"https://github.com/rubenCodeforges.png","language":"TypeScript","readme":"## ng-forms (WIP)\n\nThis module will make your form building in Angular 4+ easier.\nDynamically create reactive forms, as simple as adding a component and provide with required inputs.\n\nShould help reduce repeatable tasks when building forms.\nThe goal is not only make dynamic forms easy to build but even make the process more automated.\nImagine a situation when you have `new user form`  \nyou have a backend endpoint and some interface describing the fields,\nnow the idea is to feed the interface ( better class ) to the `ng-forms` and it should build the whole new user form for you.\n\n### How to use:\nAdd a this to your AppModule: \n\n```typescript \n\n@NgModule({\n    imports: [\n        NgFormsModule\n    ],\n})\nexport AppModule\n\n```\n\nNow you can use the component:\n\n```html\n\u003cng-forms [inputs]=\"getInputs()\" (submit)=\"doSomeThing($event)\"\u003e\u003c/ng-forms \u003e\n\n```\n\n#### Automated usage:\nThe easiest way to use `ng-dynamic-form` is to add decorators to your models and extend from `DynamicFormModel`\n\n\n```typescript\n// Your model\nexport class BookModel extends NgFormsModel {\n    private uuid: string;\n\n    @NgFormField({ fieldType: FormFieldType.TEXT })\n    private name: string;\n\n    @NgFormField({ fieldType: FormFieldType.TEXT_AREA })\n    private description: string;\n\n    @NgFormField({\n        fieldType: FormFieldType.SELECT,\n        selectOptionKeys: {labelKey: 'name', valueKey: 'id'}\n    })\n    private authors: {id: string, name: string}[];\n\n    constructor(name: string, description: string, authors: { id: string; name: string }[]) {\n        super();\n        this.name = name;\n        this.description = description;\n        this.authors = authors;\n    }\n}\n\n\n```\nnow in your component you can do the following:\n\n```typescript\n@Component({\n    selector: 'my-example-book-form',\n    template: '\u003cng-forms-material [inputs]=\"getInputs()\"\u003e\u003c/ng-forms-material\u003e'\n})\nclass ExampleComponent {\n    private book: BookModel = new BookModel(\n        'Test book',\n        '',\n        [\n            {id: '1', name: 'Roger'},\n            {id: '2', name: 'Roger2'}\n        ]\n    );\n\n    public getInputs(): BaseInput[] {\n        // For demo purpose BookModel is instantiated here , it can also be a injectable\n        return this.book.getFormFields();\n    }\n}\n\n\n```\n\nThat is it , the `getFormFields()` will return an array of FormInputs , it will scan your Model for decorated properties\nand will use them to build the form.\n\n#### Manual way\n\nIf you need more flexibility you can create the form fields Manual.\nLets change the first example a bit.\n\n```typescript\n@Component({\n    selector: 'my-example-book-form',\n    template: '\u003cng-forms-material [inputs]=\"getInputs()\"\u003e\u003c/ng-forms-material\u003e'\n})\nclass ExampleComponent {\n\n    public getInputs(): BaseInput[] {\n        // For demo purpose BookModel is instantiated here , it can also be a injectable\n        return [\n            new TextInput('book-name'),\n            new TextAreaInput('book-description'),\n        ];\n    }\n}\n\n```\n\n### Templates\n\nYou can override and create custom templates for your forms.\nIve made a couple of build in Themes.\nFor example see material design theme.\n\nTo use it simply replace the `\u003cng-forms\u003e`  with `\u003cng-forms-material\u003e`\n\n\n\nMore input coming up, feel free to ask.\nNpm coming up.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubencodeforges%2Fng-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubencodeforges%2Fng-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubencodeforges%2Fng-forms/lists"}