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.

Files

Permalink
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
README.md Use default generics May 15, 2017
karma.conf.js
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
wercker.yml
yarn.lock chore: upgrade related paclages May 10, 2018

README.md

ngx-typed-forms wercker status npm version

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

Install

yarn add ngx-typed-forms

or

npm install ngx-typed-forms

Remarks

This module requires TypeScript v2.3.2 or later because using Generics defaults feature.

Usage

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

License

This software is released under the MIT License, see LICENSE under the this repository.

You can’t perform that action at this time.