@ngserveio/form-services v8.0.0
@ngserveio/form-services
Find more at libraries and examples at NgServe.io.
Read More At Angular Tutorial - Reusable Form Component with Multiple Controls and Validation
Running unit tests
Run nx test ui-form-services
to execute the unit tests.
Purpose
This library extends Angular's FormGroup allowing for a generic form group and validation utilizing @ngserveio/you-good validations.
See the Video Tutorial on YouTube
FormGroupSubmit
An extension of Angular's FormGroup class that supplies the ability to check if the form has been marked as submitted.
Properties
Name | Type | Description |
---|---|---|
submitted$ | BehaviorSubject<boolean> | Checks if the form has been marked as submitted |
Methods
Name | Return Type | Description |
---|---|---|
dispose() | void | Completes the submitted$ property's stream |
submit() | void | Marks the form as having been submitted and will mark all fields in form as touched. |
reset() | void | Resets the form, marks submitted as false |
getFormGroupSubmit(ctrl: AbstractControl) | FormGroupSubmit | null | A static method that returns the FormGroupSubmit if the nested parent exists on the ctrl . |
ModeledFormGroup
A generic modeled form group that binds the keys of the models to an AbstractControl
. Its takes an additional parameter of type (item: T) => PropertyValidationErrors<T>
. See @ngserveio/you-good for validation types and examples for validations.
Properties
Name | Description | |
---|---|---|
getChangedValues | Subset<T> | Returns the changed values of the controls. Useful for PATCH requests. |
type FullName = { firstName: string; lastName: string };
const fullNameValidator = validate<FullName>({
firstName: propertyValidators(
(item) => item.firstName,
[required, emptyOrWhiteSpace]
),
lastName: propertyValidators(
(item) => item.lastName,
[required, emptyOrWhiteSpace]
),
});
const formGroup = new ModeledFormGroup<FullName>(
{
firstName,
lastName,
},
fullNameValidator
);
Subscribing to the modelChanged
property provides the defined generic type returned and validates the form in the stream.
formGroup.modelChanged.subscribe(({ firstName, lastName }) => {
console.log(`${firstName} ${lastName}`);
// Output: Steve Yzerman
});
formGroup.patchValue({
firstName: 'Steve',
lastName: 'Yzerman',
});
19 days ago
3 months ago
5 months ago
10 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
10 months ago
6 months ago
6 months ago
10 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago