ngx-input-errors/fesm2022/ngx-input-errors.mjs

The ngx-input-errors library provides dynamic error messages for Angular Forms validations and automatic error extraction for displaying error messages.

import * as i0 from '@angular/core';
import { makeEnvironmentProviders, HostBinding, Input, Optional, Directive } from '@angular/core';

class ErrorMessages {
}
function provideNgxInputErrorMessages(config) {
    return makeEnvironmentProviders([
        { provide: ErrorMessages, useValue: config }
    ]);
}

class NgxInputErrors {
    set form(form) {
        const formControl = form.get(this.controlName);
        if (formControl) {
            /**
             * check first validation when form control initialize
             */
            this.checkFormControlValidation(formControl);
            formControl.statusChanges.subscribe(value => {
                this.checkFormControlValidation(formControl);
            });
        }
        else {
            throw new Error(`couldn\'t find form control name ${this.controlName}`);
        }
    }
    constructor(config, el) {
        this.config = config;
        this.el = el;
        this.message = '';
        this.displayName = '';
        this.initializeErrorMessageFromConfigFile();
        console.log('lib config:');
        console.log({ config });
    }
    /**
     * set error message language and
     * get error messages from config file
     */
    initializeErrorMessageFromConfigFile() {
        this.setErrorMessageLanguage();
        this.getErrorMessagesFromConfigFile();
    }
    /**
     * set error message language to display
     */
    setErrorMessageLanguage() {
        // if user didn't set language, we use default language in config file
        if (!this.language) {
            if (!this.config.defaultLanguage) {
                throw new Error('you didn\'t set default language for error messages in config file!');
            }
            this.language = this.config.defaultLanguage;
        }
    }
    getErrorMessagesFromConfigFile() {
        if (this.config.errorMessages) {
            this.errorMessages = this.config.errorMessages;
        }
        else {
            throw new Error('error messages is not set in config file');
        }
    }
    /**
     * check the form control state
     * @param formControl reactive form formControl
     */
    checkFormControlValidation(formControl) {
        if (formControl.invalid && formControl.errors) {
            let message = '';
            const errors = formControl.errors;
            message = this.extractError(this.errorMessages, errors, this.language, this.displayName);
            this.message = message;
            this.el.nativeElement.innerText = message;
            this.inValid = true;
        }
        else {
            this.el.nativeElement.innerText = '';
            this.message = '';
            this.inValid = false;
        }
    }
    /**
     * this function extract the reactive form validation errors from our custom error message with different languages
     * @param errorMessages the error messages object is for define our showing user input error
     * @param errors the value of errors in input object that define in form
     * @param language the language of the error that we want to extract
     * @param displayName the display input name for user
     */
    extractError(errorMessages, errors, language, displayName) {
        const messages = errorMessages[language];
        let error;
        if (!messages) {
            throw new Error(`unable to find language of ${language} in error messages`);
        }
        if (!messages['defaultMessage']) {
            throw new Error(`default message property in ${language} is missing`);
        }
        /**
         * for example the key of errors is required
         * I get the required function from error message
         * and the pass display name and errors to required function
         * finally extract the message
         */
        Object.keys(errors).forEach(key => {
            const errorMessage = messages[key];
            error = errorMessage ? errorMessage(displayName, errors) : messages['defaultMessage'](displayName);
        });
        return error;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NgxInputErrors, deps: [{ token: ErrorMessages, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: NgxInputErrors, isStandalone: true, selector: "[ngxInputErrors]", inputs: { controlName: "controlName", displayName: "displayName", language: "language", form: "form" }, host: { properties: { "class.invalid": "this.inValid" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NgxInputErrors, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngxInputErrors]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: ErrorMessages, decorators: [{
                    type: Optional
                }] }, { type: i0.ElementRef }], propDecorators: { controlName: [{
                type: Input
            }], displayName: [{
                type: Input
            }], language: [{
                type: Input
            }], form: [{
                type: Input,
                args: ['form']
            }], inValid: [{
                type: HostBinding,
                args: ['class.invalid']
            }] } });

/*
 * Public API Surface of ngx-input-errors
 */

/**
 * Generated bundle index. Do not edit.
 */

export { ErrorMessages, NgxInputErrors, provideNgxInputErrorMessages };
//# sourceMappingURL=ngx-input-errors.mjs.map