ngx-typed-forms's Introduction

ngx-typed-forms

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

Install

yarn add ngx-typed-forms

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