{"id":15391032,"url":"https://github.com/quramy/ngx-typed-forms","last_synced_at":"2025-04-15T21:43:07.915Z","repository":{"id":66208007,"uuid":"91297773","full_name":"Quramy/ngx-typed-forms","owner":"Quramy","description":"Extends Angular reactive forms strongly typed","archived":false,"fork":false,"pushed_at":"2018-09-24T17:12:08.000Z","size":52,"stargazers_count":27,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T02:31:06.841Z","etag":null,"topics":["angular","form"],"latest_commit_sha":null,"homepage":null,"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/Quramy.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-15T05:17:35.000Z","updated_at":"2021-10-18T10:56:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"ba044f65-79e8-40dc-a9d4-09fa59605260","html_url":"https://github.com/Quramy/ngx-typed-forms","commit_stats":{"total_commits":22,"total_committers":2,"mean_commits":11.0,"dds":0.09090909090909094,"last_synced_commit":"58431a678f6e91191b6403370f2a480ee4ade38b"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quramy%2Fngx-typed-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quramy%2Fngx-typed-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quramy%2Fngx-typed-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quramy%2Fngx-typed-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Quramy","download_url":"https://codeload.github.com/Quramy/ngx-typed-forms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249161044,"owners_count":21222463,"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","form"],"created_at":"2024-10-01T15:09:42.870Z","updated_at":"2025-04-15T21:43:07.876Z","avatar_url":"https://github.com/Quramy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-typed-forms [![wercker status](https://app.wercker.com/status/1b1a639ac430358b93ea3960352ea758/s/master \"wercker status\")](https://app.wercker.com/project/byKey/1b1a639ac430358b93ea3960352ea758) [![npm version](https://badge.fury.io/js/ngx-typed-forms.svg)](https://badge.fury.io/js/ngx-typed-forms)\n\nProvides wrapped [Angular's FormBuilder](https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html) to write `AbstractControl\u003cT\u003e`. \nIt's a workaround for [issue#13721](https://github.com/angular/angular/issues/13721).\n\n## Install\n\n```sh\nyarn add ngx-typed-forms\n```\n\nor\n\n```sh\nnpm install ngx-typed-forms\n```\n\n### Remarks\n**This module requires TypeScript v2.3.2 or later because using [Generics defaults](https://github.com/Microsoft/TypeScript/pull/13487) feature**.\n\n## Usage\nFirst, import module into your app:\n\n```ts\nimport { NgxTypedFormsModule } from 'ngx-typed-forms';\n\n@NgModule({\n  imports: [NgxTypedFormsModule],\n})\nexport class AppModule { }\n```\n\nAnd you can build some form group with `FormBuilder` provided by this module. For example:\n\n```ts\n// import { FormBuilder } from '@angular/forms';\nimport { FormBuilder } from 'ngx-typed-forms';\n\n@Component({...})\nexport MyFormComponent {\n\n  constructor(private formBuilder: FormBuilder) { }\n\n  ngOnInit() {\n    const group = this.formBuilder.group({\n      firstName: 'Yosuke',\n      lastName: 'Kurami',\n    });\n\n    group.valueChanges().subscrive(user =\u003e {\n      /* the user argument has a type, { firstName: string; lastName: string } */\n    });\n  }\n}\n```\n\nOr more complex example:\n\n```ts\ninterface ComplexForm {\n  name: {\n    first: string;\n    last: string;\n  };\n  age: number;\n  favoriteDishes: string[];\n};\n\nconst form = formBuilder.group\u003cComplexForm\u003e({\n  name: fb.group({ first: 'Yosuke', last: 'Kurami' }),\n  age: 32,\n  favoriteDishes: fb.array\u003cstring\u003e([fb.control('faboriteDish')]),\n});\n\nconst nameCtrl = form.get('name'); // returns AbstractControl\u003c{ first: string; last: string; }\u003e\nnameCtrl.valueChanges.subscribe(({ last, first }) =\u003e console.log(last, first));\n```\n\n# License\nThis software is released under the MIT License, see LICENSE under the this repository.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquramy%2Fngx-typed-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquramy%2Fngx-typed-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquramy%2Fngx-typed-forms/lists"}