@ngserveio/form-services

Find more at libraries and examples at NgServe.io.

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
`modelChanged: Observable<T>`	Needed to subscribe to the current changes of the form and emits a value of `T`. Must be subscribe in order to validate the form fields.

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

npm