Provides wrapped Angular's FormBuilder to write AbstractControl<T>.
It's a workaround for issue#13721.
yarn add ngx-typed-formsor
npm install ngx-typed-formsThis module requires TypeScript v2.3.2 or later because using Generics defaults feature.
First, import module into your app:
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:
// 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:
interface ComplexForm {
name: {
first: string;
last: string;
};
age: number;
favoriteDishes: string[];
};
const form = formBuilder.group<ComplexForm>({
name: fb.group({ first: 'Yosuke', last: 'Kurami' }),
age: 32,
favoriteDishes: fb.array<string>([fb.control('faboriteDish')]),
});
const nameCtrl = form.get('name'); // returns AbstractControl<{ first: string; last: string; }>
nameCtrl.valueChanges.subscribe(({ last, first }) => console.log(last, first));This software is released under the MIT License, see LICENSE under the this repository.