ngx-strong-forms
Getting Started
Installation Instructions
Install ngx-strong-forms from npm:
npm install ngx-strong-forms --saveUsage
This library provides 4 different types of form control.
TypedFormArray
This uses the Angular FormArray under the hood. It represents an array of items with type T, items can be added and removed but they must all be of type T.
TypedFormControl
This uses the Angular FormControl under the hood. It represents a single item of type T.
TypedFormDictionary
This uses the Angular FormGroup under the hood. It represents a dictionary of items of type T with a string key, items can be added and removed but they must all be of type T.
TypedFormGroup
This uses the Angular FormGroup under the hood. It represents a group of other form controls, once it is created items cannot be added or removed.
Examples
import { TypedFormControl, TypedFormGroup, TypedFormDictionary } from 'ngx-strong-forms';
const form = new TypedFormGroup({
name: new TypedFormControl<string>(),
details: new TypedFormGroup({
size: new TypedFormControl<'small' | 'medium' | 'large'>(),
weight: new TypedFormControl<number>()
}),
locations: new TypedFormDictionary({
usa: new TypedFormGroup({
count: new TypedFormControl<number>()
}),
japan: new TypedFormGroup({
count: new TypedFormControl<number>()
})
})
});
form.controls.name.value // type is string
form.controls.details.controls.weight.valueChanges // type is Observable<number>
form.value // type is:
// {
// name: string,
// details: {
// size: 'small' | 'medium' | 'large',
// weight: number
// },
// locations: {
// [key: string]: {
// count: number
// }
// }
// }
form.controls.locations.addControl('brazil', new TypedFormControl(0)); // error: argument must be of type TypedFormGroup<{ count: TypedFormControl<number> }>To access the underlying Angular control, just use the ng property:
<div [formGroup]="form.ng">
<input type="text" formControlName="name">
<ul>
<li *ngFor="let location of form.get('locations').controls | keyvalue">
<span>Name: {{location.key}}</span>
<input type="number" [formControl]="location.value.controls.count.ng">
</li>
</ul>
</div>