Skip to content
Extends Angular reactive forms strongly typed
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix: fix Observable import path to use rxjsv6 without rxjs-compat May 10, 2018
.gitignore Initial commit May 15, 2017
.npmignore add May 15, 2017
LICENSE Use default generics May 15, 2017
package.json 0.6.0 May 10, 2018
rollup.config.es5.js Initial commit May 15, 2017
rollup.config.js Initial commit May 15, 2017
rollup.config.umd.js Initial commit May 15, 2017
webpack.test.config.js add test May 15, 2017
yarn.lock chore: upgrade related paclages May 10, 2018

ngx-typed-forms wercker status npm version

Provides wrapped Angular's FormBuilder to write AbstractControl<T>. It's a workaround for issue#13721.


yarn add ngx-typed-forms


npm install ngx-typed-forms


This 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';

  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';

export MyFormComponent {

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    const 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 =<ComplexForm>({
  name:{ 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.

You can’t perform that action at this time.