@ngserveio/form-services v9.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

Methods

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

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