quramy / ngx-typed-forms

Extends Angular reactive forms strongly typed

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

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.

ngx-typed-forms's Issues

FormGroup.patchValue does not support super or subsets

The current implementation of FormGroup.patchValue only allows an object with the exact same properties. However, the specification of angular FormGroup says:

Patches the value of the FormGroup. It accepts an object with control names as keys, and does its best to match the values to the correct controls in the group.

It accepts both super-sets and sub-sets of the group without throwing an error

This is currently not possible without a cast to any.

Suggestions:

• Change the parameter type to any since both sub and supersets can be accepted. However, you lose all type information.
• Change the parameter type to Partial<T> to only allow sub-sets. I assume this scenario will be used the most and still allows the use of type information. Should the user use a super-set, a cast to any can still be added.