https://github.com/quramy/ngx-typed-forms
Extends Angular reactive forms strongly typed
https://github.com/quramy/ngx-typed-forms
angular form
Last synced: about 1 year ago
JSON representation
Extends Angular reactive forms strongly typed
- Host: GitHub
- URL: https://github.com/quramy/ngx-typed-forms
- Owner: Quramy
- License: mit
- Created: 2017-05-15T05:17:35.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-24T17:12:08.000Z (over 7 years ago)
- Last Synced: 2025-04-09T02:31:06.841Z (about 1 year ago)
- Topics: angular, form
- Language: TypeScript
- Size: 50.8 KB
- Stars: 27
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-typed-forms [](https://app.wercker.com/project/byKey/1b1a639ac430358b93ea3960352ea758) [](https://badge.fury.io/js/ngx-typed-forms)
Provides wrapped [Angular's FormBuilder](https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html) to write `AbstractControl`.
It's a workaround for [issue#13721](https://github.com/angular/angular/issues/13721).
## Install
```sh
yarn add ngx-typed-forms
```
or
```sh
npm install ngx-typed-forms
```
### Remarks
**This module requires TypeScript v2.3.2 or later because using [Generics defaults](https://github.com/Microsoft/TypeScript/pull/13487) feature**.
## Usage
First, import module into your app:
```ts
import { NgxTypedFormsModule } from 'ngx-typed-forms';
@NgModule({
imports: [NgxTypedFormsModule],
})
export class AppModule { }
```
And you can build some form group with `FormBuilder` provided by this module. For example:
```ts
// import { FormBuilder } from '@angular/forms';
import { FormBuilder } from 'ngx-typed-forms';
@Component({...})
export MyFormComponent {
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
const group = this.formBuilder.group({
firstName: 'Yosuke',
lastName: 'Kurami',
});
group.valueChanges().subscrive(user => {
/* the user argument has a type, { firstName: string; lastName: string } */
});
}
}
```
Or more complex example:
```ts
interface ComplexForm {
name: {
first: string;
last: string;
};
age: number;
favoriteDishes: string[];
};
const form = formBuilder.group({
name: fb.group({ first: 'Yosuke', last: 'Kurami' }),
age: 32,
favoriteDishes: fb.array([fb.control('faboriteDish')]),
});
const nameCtrl = form.get('name'); // returns AbstractControl<{ first: string; last: string; }>
nameCtrl.valueChanges.subscribe(({ last, first }) => console.log(last, first));
```
# License
This software is released under the MIT License, see LICENSE under the this repository.