@nx-squeezer/ngx-forms

This library provides useful extensions for Angular forms, check the documentation to see all available features.

• Lazy Validation
  • Provide Lazy Validator in a Directive
  • In a Form Control
• Installation

Lazy Validation

Use the following utilities to lazy load large and complex validators. Heavily inspired of this wonderful article from @NetanelBasal.

Provide Lazy Validator in a Directive

@Directive({
  selector: '[lazyValidator]',
  standalone: true,
  providers: [provideLazyValidator(() => import('./validator'))], // Internally provides NG_ASYNC_VALIDATORS
})
export class ValidatorDirective {}

const validator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  // Large and complex validator
};

export default validator; // Note that it works with the default export

In a Form Control

export class FormComponent {
  private readonly formBuilder = inject(FormBuilder);
  readonly formGroup = this.formBuilder.group({
    lazy: this.formBuilder.control('invalid', { asyncValidators: [lazyValidator(() => import('./validator'))] }),
  });
}

Note: the function lazyValidator uses internally inject so it has to be used in an injection context, such as field initalization.

Installation

Do you like this library? Go ahead and use it! It is production ready, with 100% code coverage, protected by integration tests, and uses semantic versioning. To install it:

npm install @nx-squeezer/ngx-forms