ngx-formcontrol-errors-msgs/index.d.ts

A directive for showing errors in Angular form controls on reactive forms

import * as i0 from '@angular/core';
import { ViewContainerRef, ComponentRef, InjectionToken, OnInit, OnDestroy } from '@angular/core';
import { ValidationErrors, FormGroupDirective, FormControlName, FormControl } from '@angular/forms';

type KeyValueObject = {
    [key: string]: string;
};

/**
 * Readable messages for the built-in valitators
 */
declare const Messages: KeyValueObject;

interface ErrorMessage {
    message: string;
    value?: unknown;
}
interface ErrorMsgComponent {
    messages: ErrorMessage[] | null;
}

interface ErrorMessageComponentFactory {
    createComponent(viewContainerRef: ViewContainerRef): ComponentRef<ErrorMsgComponent>;
}

interface ErrorMsgParser {
    /**
     * Method to parse ValidationErrors into a readable string
     * to be displayed to the user.
     *
     * @param error - Validation error to parse
     */
    parse(error: ValidationErrors): ErrorMessage[];
}

declare const ERROR_MSG_PARSER: InjectionToken<ErrorMsgParser>;

declare class ErrorMsgParserService implements ErrorMsgParser {
    private customErrorMessages;
    private errorMessages;
    constructor(customErrorMessages: KeyValueObject);
    getMessageByKey(key: string): string;
    errorMessageParser(errorKey: string, valueKey: string, value: string | number | null): string;
    parse(error: ValidationErrors): ErrorMessage[];
    static ɵfac: i0.ɵɵFactoryDeclaration<ErrorMsgParserService, [{ optional: true; }]>;
    static ɵprov: i0.ɵɵInjectableDeclaration<ErrorMsgParserService>;
}

/**
 * Allows ease way to display `ValidationErrors` in a form.
 *
 * @example
 *
 * ```typescript
 * @Component({
 *  selector: 'app-form',
 *  standalone: true,
 *  imports: [FormcontrolErrorsDirective, ReactiveFormsModule],
 *  template: `
 *    <form [formGroup]="form">
 *     <div class="form-row">
 *       <label for="name">Name</label>
 *       <input id="name" type="text" formControlName="name" ngxFormcontrolErrors>
 *     </div>
 *     <div class="form-row">
 *       <label for="email">Email</label>
 *       <input id="email" type="email" formControlName="email" ngxFormcontrolErrors>
 *     </div>
 *    </form>
 *  `
 * })
 * export class AppComponent {
 *
 *  form = this.formBuilder.group({
 *    name: ['', [Validators.required, Validators.maxLength(10)]],
 *    email: ['', [Validators.required, Validators.email]],
 *  });
 *
 * }
 * ```
 *
 */
declare class FormcontrolErrorsDirective implements OnInit, OnDestroy {
    private readonly viewContainerRef;
    private readonly errorMsgParser;
    private formGroup;
    private readonly formControlName;
    private readonly formControl;
    private readonly customErrorMsgParser;
    private readonly errorMessageComponentFactory?;
    private errorInfoComponent;
    private control;
    private sub$;
    private errorParser?;
    /**
     * @internal
     */
    onBlur(): void;
    constructor(viewContainerRef: ViewContainerRef, errorMsgParser: ErrorMsgParserService, formGroup: FormGroupDirective, formControlName: FormControlName, formControl: FormControl, customErrorMsgParser: ErrorMsgParser, errorMessageComponentFactory?: ErrorMessageComponentFactory | undefined);
    /**
     * @internal
     */
    ngOnInit(): void;
    /**
     * @internal
     */
    ngOnDestroy(): void;
    /**
     * @internal
     */
    validataStatus(status: string): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<FormcontrolErrorsDirective, [null, null, null, { optional: true; host: true; }, { optional: true; host: true; }, { optional: true; }, { optional: true; }]>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FormcontrolErrorsDirective, "[ngxFormcontrolErrors]", never, {}, {}, never, never, true, never>;
}

declare const ERROR_MSG_COMPONENT_FACTORY: InjectionToken<ErrorMessageComponentFactory>;

declare function validationErrors2KeyValue(error: ValidationErrors): {
    key: string;
    value: any;
}[];

/**
 * InjectionToken to allow customization of messages by injecting new ones
 */
declare const FORM_ERROR_MESSAGES_PROVIDER: InjectionToken<KeyValueObject>;

export { ERROR_MSG_COMPONENT_FACTORY, ERROR_MSG_PARSER, ErrorMsgParserService, FORM_ERROR_MESSAGES_PROVIDER, FormcontrolErrorsDirective, Messages, validationErrors2KeyValue };
export type { ErrorMessage, ErrorMessageComponentFactory, ErrorMsgComponent, ErrorMsgParser, KeyValueObject };