@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',
});

Change Log