@ngserveio/form-services
TypeScript icon, indicating that this package has built-in type declarations

8.1.1 • Public • Published

@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

Shared Validators for Angular and NestJS

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

Readme

Keywords

Package Sidebar

Install

npm i @ngserveio/form-services

Weekly Downloads

46

Version

8.1.1

License

none

Unpacked Size

44.6 kB

Total Files

17

Last publish

Collaborators

  • ngserve