@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