ngx-typed-reactive-form
v0.0.5
Published
Make Angular Reactive Forms strongly typed with generics.
Downloads
19
Maintainers
Readme
NgxTypedReactiveForm
What is it
It is an attempt to bring types to Angular's Reactive Forms using generics. For the sake of intellisense and better developer experience.
Online demo: strongly typed reactive form on Stackblitz
Features
- No overrides.
- No API to learn.
- Types for
Valuechanges
,value
, etc. - Four generic types:
- TypedFormBuilderConfig
- TypedFormControl
- TypedFormGroup
- TypedFormArray
Usage
- Start with a model:
export interface UserDto {
name: string;
about: string;
registered: string;
}
- Generate a strongly typed
TypedFormBuilderConfig
based on the model, to use with Reactive FormsFormBuilder
:
export const USER_FORM_CONFIG: TypedFormBuilderConfig<UserDto> = {
/** NOTE: value is strongly typed */
name: ['John Doe', Validators.required],
about: ['This is a generic description', Validators.required],
registered: ['1992-12-12', Validators.required],
};
- Create a typed reactive form:
export class DemoComponent implements OnInit {
public userFormGroup: TypedFormGroup<UserDto>;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.userFormGroup = this.fb.group(USER_FORM_CONFIG) as TypedFormGroup<UserDto>;
}
}
- Enjoy intellisense in template and form's methods:
<input [formControl]="userFormGroup.controls.name" />
Don't forget to star in on github if you like it.