ion-form-error-messages/fesm2015/ion-form-error-messages.js

An ionic 4 component that will display a list of error messages for a given reactive form formGroup object.

import { Component, Input, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

/**
 * @fileoverview added by tsickle
 * Generated from: ion-form-error-messages.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class IonFormErrorMessagesComponent {
    constructor() {
        this.color = 'danger';
    }
    /**
     * @return {?}
     */
    get filteredControls() {
        if (!this.formGroup) {
            return [];
        }
        /** @type {?} */
        let controls = this.objectToKeys(this.formGroup.controls);
        if (controls && (this.controls || this.control)) {
            /** @type {?} */
            let filterToUse = [];
            if (this.control) {
                filterToUse.push(this.control);
            }
            if (Array.isArray(this.controls)) {
                filterToUse = filterToUse.concat(this.controls);
            }
            if (filterToUse.length) {
                controls = controls.filter((/**
                 * @param {?} control
                 * @return {?}
                 */
                control => filterToUse.indexOf(control) >= 0));
            }
        }
        return controls;
    }
    /**
     * @return {?}
     */
    ngOnInit() { }
    /**
     * @param {?} controlKey
     * @return {?}
     */
    getErrors(controlKey) {
        if (!this.formGroup || !this.formGroup.controls || !this.formGroup.controls[controlKey]) {
            return {};
        }
        return this.formGroup.controls[controlKey].errors;
    }
    /**
     * @return {?}
     */
    isAnyControlInvalid() {
        /** @type {?} */
        const controlKeys = Object.keys(this.formGroup.controls);
        /** @type {?} */
        let isInvalid = false;
        for (const controlKey of controlKeys) {
            if (this.isControlInvalid(controlKey)) {
                isInvalid = true;
                break;
            }
        }
        return isInvalid;
    }
    /**
     * @param {?} controlKey
     * @return {?}
     */
    isControlInvalid(controlKey) {
        /** @type {?} */
        const control = this.formGroup.controls[controlKey];
        if (!control || !control.errors) {
            return false;
        }
        else {
            /** @type {?} */
            const errorKeys = Object.keys(control.errors);
            /** @type {?} */
            let isInvalid = false;
            for (const errorKey of errorKeys) {
                if (this.messages[controlKey][errorKey]) {
                    isInvalid = true;
                    break;
                }
            }
            return control.invalid && isInvalid && (control.dirty || control.touched);
        }
    }
    /**
     * @param {?} value
     * @return {?}
     */
    objectToKeys(value) {
        if (!value) {
            return value;
        }
        return Object.keys(value);
    }
}
IonFormErrorMessagesComponent.decorators = [
    { type: Component, args: [{
                selector: 'ion-form-error-messages',
                template: `
        <ion-item *ngIf="isAnyControlInvalid()" lines="none">
            <ion-grid class="ion-no-padding">
                <ng-container *ngFor="let controlKey of filteredControls">
                    <ng-container *ngFor="let errorKey of objectToKeys(getErrors(controlKey))">
                        <ng-container *ngIf="messages[controlKey] || {} as errorMessages">
                            <ion-row *ngIf="errorMessages[errorKey]">
                                <ion-col class="ion-no-padding ion-text-wrap">
                                    <ion-text [color]="color" [innerHtml]="errorMessages[errorKey]"> </ion-text>
                                </ion-col>
                            </ion-row>
                        </ng-container>
                    </ng-container>
                </ng-container>
            </ion-grid>
        </ion-item>
    `,
                styles: [' ion-item { --min-height: 16px; font-size: 14px;}']
            }] }
];
/** @nocollapse */
IonFormErrorMessagesComponent.ctorParameters = () => [];
IonFormErrorMessagesComponent.propDecorators = {
    formGroup: [{ type: Input }],
    messages: [{ type: Input }],
    color: [{ type: Input }],
    control: [{ type: Input }],
    controls: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    IonFormErrorMessagesComponent.prototype.formGroup;
    /** @type {?} */
    IonFormErrorMessagesComponent.prototype.messages;
    /** @type {?} */
    IonFormErrorMessagesComponent.prototype.color;
    /** @type {?} */
    IonFormErrorMessagesComponent.prototype.control;
    /** @type {?} */
    IonFormErrorMessagesComponent.prototype.controls;
}

/**
 * @fileoverview added by tsickle
 * Generated from: ion-form-error-messages.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class IonFormErrorMessagesModule {
}
IonFormErrorMessagesModule.decorators = [
    { type: NgModule, args: [{
                declarations: [IonFormErrorMessagesComponent],
                imports: [CommonModule, FormsModule, IonicModule],
                exports: [IonFormErrorMessagesComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: public-api.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * Generated from: ion-form-error-messages.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { IonFormErrorMessagesComponent, IonFormErrorMessagesModule };
//# sourceMappingURL=ion-form-error-messages.js.map