ion-form-error-messages
Version:
An ionic 4 component that will display a list of error messages for a given reactive form formGroup object.
149 lines • 12.7 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: ion-form-error-messages.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
export 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;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW9uLWZvcm0tZXJyb3ItbWVzc2FnZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vaW9uLWZvcm0tZXJyb3ItbWVzc2FnZXMvIiwic291cmNlcyI6WyJpb24tZm9ybS1lcnJvci1tZXNzYWdlcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN6RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUF1QjNDLE1BQU0sT0FBTyw2QkFBNkI7SUEyQnRDO1FBeEJTLFVBQUssR0FBRyxRQUFRLENBQUM7SUF3QlgsQ0FBQzs7OztJQXBCaEIsSUFBSSxnQkFBZ0I7UUFDaEIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDakIsT0FBTyxFQUFFLENBQUM7U0FDYjs7WUFDRyxRQUFRLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQztRQUN6RCxJQUFJLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxFQUFFOztnQkFDekMsV0FBVyxHQUFhLEVBQUU7WUFDOUIsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO2dCQUNkLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO2FBQ2xDO1lBQ0QsSUFBSSxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsRUFBRTtnQkFDOUIsV0FBVyxHQUFHLFdBQVcsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2FBQ25EO1lBRUQsSUFBSSxXQUFXLENBQUMsTUFBTSxFQUFFO2dCQUNwQixRQUFRLEdBQUcsUUFBUSxDQUFDLE1BQU07Ozs7Z0JBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBQyxDQUFDO2FBQzVFO1NBQ0o7UUFDRCxPQUFPLFFBQVEsQ0FBQztJQUNwQixDQUFDOzs7O0lBR0QsUUFBUSxLQUFJLENBQUM7Ozs7O0lBRWIsU0FBUyxDQUFDLFVBQWtCO1FBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNyRixPQUFPLEVBQUUsQ0FBQztTQUNiO1FBRUQsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsQ0FBQyxNQUFNLENBQUM7SUFDdEQsQ0FBQzs7OztJQUVELG1CQUFtQjs7Y0FDVCxXQUFXLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQzs7WUFDcEQsU0FBUyxHQUFHLEtBQUs7UUFDckIsS0FBSyxNQUFNLFVBQVUsSUFBSSxXQUFXLEVBQUU7WUFDbEMsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLEVBQUU7Z0JBQ25DLFNBQVMsR0FBRyxJQUFJLENBQUM7Z0JBQ2pCLE1BQU07YUFDVDtTQUNKO1FBQ0QsT0FBTyxTQUFTLENBQUM7SUFDckIsQ0FBQzs7Ozs7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFrQjs7Y0FDekIsT0FBTyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQztRQUNuRCxJQUFJLENBQUMsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtZQUM3QixPQUFPLEtBQUssQ0FBQztTQUNoQjthQUFNOztrQkFDRyxTQUFTLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDOztnQkFDekMsU0FBUyxHQUFHLEtBQUs7WUFFckIsS0FBSyxNQUFNLFFBQVEsSUFBSSxTQUFTLEVBQUU7Z0JBQzlCLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsQ0FBQyxRQUFRLENBQUMsRUFBRTtvQkFDckMsU0FBUyxHQUFHLElBQUksQ0FBQztvQkFDakIsTUFBTTtpQkFDVDthQUNKO1lBQ0QsT0FBTyxPQUFPLENBQUMsT0FBTyxJQUFJLFNBQVMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQzdFO0lBQ0wsQ0FBQzs7Ozs7SUFFRCxZQUFZLENBQUMsS0FBVTtRQUNuQixJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ1IsT0FBTyxLQUFLLENBQUM7U0FDaEI7UUFDRCxPQUFPLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDOUIsQ0FBQzs7O1lBL0ZKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUseUJBQXlCO2dCQUNuQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7S0FnQlQ7eUJBQ1EsbURBQW1EO2FBQy9EOzs7Ozt3QkFFSSxLQUFLO3VCQUNMLEtBQUs7b0JBQ0wsS0FBSztzQkFDTCxLQUFLO3VCQUNMLEtBQUs7Ozs7SUFKTixrREFBOEI7O0lBQzlCLGlEQUFzRTs7SUFDdEUsOENBQTBCOztJQUMxQixnREFBeUI7O0lBQ3pCLGlEQUE0QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2lvbi1mb3JtLWVycm9yLW1lc3NhZ2VzJyxcbiAgICB0ZW1wbGF0ZTogYFxuICAgICAgICA8aW9uLWl0ZW0gKm5nSWY9XCJpc0FueUNvbnRyb2xJbnZhbGlkKClcIiBsaW5lcz1cIm5vbmVcIj5cbiAgICAgICAgICAgIDxpb24tZ3JpZCBjbGFzcz1cImlvbi1uby1wYWRkaW5nXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgY29udHJvbEtleSBvZiBmaWx0ZXJlZENvbnRyb2xzXCI+XG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGVycm9yS2V5IG9mIG9iamVjdFRvS2V5cyhnZXRFcnJvcnMoY29udHJvbEtleSkpXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwibWVzc2FnZXNbY29udHJvbEtleV0gfHwge30gYXMgZXJyb3JNZXNzYWdlc1wiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxpb24tcm93ICpuZ0lmPVwiZXJyb3JNZXNzYWdlc1tlcnJvcktleV1cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGlvbi1jb2wgY2xhc3M9XCJpb24tbm8tcGFkZGluZyBpb24tdGV4dC13cmFwXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8aW9uLXRleHQgW2NvbG9yXT1cImNvbG9yXCIgW2lubmVySHRtbF09XCJlcnJvck1lc3NhZ2VzW2Vycm9yS2V5XVwiPiA8L2lvbi10ZXh0PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2lvbi1jb2w+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9pb24tcm93PlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9pb24tZ3JpZD5cbiAgICAgICAgPC9pb24taXRlbT5cbiAgICBgLFxuICAgIHN0eWxlczogWycgaW9uLWl0ZW0geyAtLW1pbi1oZWlnaHQ6IDE2cHg7IGZvbnQtc2l6ZTogMTRweDt9J11cbn0pXG5leHBvcnQgY2xhc3MgSW9uRm9ybUVycm9yTWVzc2FnZXNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIGZvcm1Hcm91cDogRm9ybUdyb3VwO1xuICAgIEBJbnB1dCgpIG1lc3NhZ2VzOiB7IFtjb250cm9sOiBzdHJpbmddOiB7IFtlcnJvcjogc3RyaW5nXTogc3RyaW5nIH0gfTtcbiAgICBASW5wdXQoKSBjb2xvciA9ICdkYW5nZXInO1xuICAgIEBJbnB1dCgpIGNvbnRyb2w6IHN0cmluZztcbiAgICBASW5wdXQoKSBjb250cm9sczogc3RyaW5nW107XG5cbiAgICBnZXQgZmlsdGVyZWRDb250cm9scygpIHtcbiAgICAgICAgaWYgKCF0aGlzLmZvcm1Hcm91cCkge1xuICAgICAgICAgICAgcmV0dXJuIFtdO1xuICAgICAgICB9XG4gICAgICAgIGxldCBjb250cm9scyA9IHRoaXMub2JqZWN0VG9LZXlzKHRoaXMuZm9ybUdyb3VwLmNvbnRyb2xzKTtcbiAgICAgICAgaWYgKGNvbnRyb2xzICYmICh0aGlzLmNvbnRyb2xzIHx8IHRoaXMuY29udHJvbCkpIHtcbiAgICAgICAgICAgIGxldCBmaWx0ZXJUb1VzZTogc3RyaW5nW10gPSBbXTtcbiAgICAgICAgICAgIGlmICh0aGlzLmNvbnRyb2wpIHtcbiAgICAgICAgICAgICAgICBmaWx0ZXJUb1VzZS5wdXNoKHRoaXMuY29udHJvbCk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBpZiAoQXJyYXkuaXNBcnJheSh0aGlzLmNvbnRyb2xzKSkge1xuICAgICAgICAgICAgICAgIGZpbHRlclRvVXNlID0gZmlsdGVyVG9Vc2UuY29uY2F0KHRoaXMuY29udHJvbHMpO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAoZmlsdGVyVG9Vc2UubGVuZ3RoKSB7XG4gICAgICAgICAgICAgICAgY29udHJvbHMgPSBjb250cm9scy5maWx0ZXIoY29udHJvbCA9PiBmaWx0ZXJUb1VzZS5pbmRleE9mKGNvbnRyb2wpID49IDApO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHJldHVybiBjb250cm9scztcbiAgICB9XG4gICAgY29uc3RydWN0b3IoKSB7fVxuXG4gICAgbmdPbkluaXQoKSB7fVxuXG4gICAgZ2V0RXJyb3JzKGNvbnRyb2xLZXk6IHN0cmluZykge1xuICAgICAgICBpZiAoIXRoaXMuZm9ybUdyb3VwIHx8ICF0aGlzLmZvcm1Hcm91cC5jb250cm9scyB8fCAhdGhpcy5mb3JtR3JvdXAuY29udHJvbHNbY29udHJvbEtleV0pIHtcbiAgICAgICAgICAgIHJldHVybiB7fTtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiB0aGlzLmZvcm1Hcm91cC5jb250cm9sc1tjb250cm9sS2V5XS5lcnJvcnM7XG4gICAgfVxuXG4gICAgaXNBbnlDb250cm9sSW52YWxpZCgpIHtcbiAgICAgICAgY29uc3QgY29udHJvbEtleXMgPSBPYmplY3Qua2V5cyh0aGlzLmZvcm1Hcm91cC5jb250cm9scyk7XG4gICAgICAgIGxldCBpc0ludmFsaWQgPSBmYWxzZTtcbiAgICAgICAgZm9yIChjb25zdCBjb250cm9sS2V5IG9mIGNvbnRyb2xLZXlzKSB7XG4gICAgICAgICAgICBpZiAodGhpcy5pc0NvbnRyb2xJbnZhbGlkKGNvbnRyb2xLZXkpKSB7XG4gICAgICAgICAgICAgICAgaXNJbnZhbGlkID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gaXNJbnZhbGlkO1xuICAgIH1cblxuICAgIGlzQ29udHJvbEludmFsaWQoY29udHJvbEtleTogc3RyaW5nKSB7XG4gICAgICAgIGNvbnN0IGNvbnRyb2wgPSB0aGlzLmZvcm1Hcm91cC5jb250cm9sc1tjb250cm9sS2V5XTtcbiAgICAgICAgaWYgKCFjb250cm9sIHx8ICFjb250cm9sLmVycm9ycykge1xuICAgICAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgY29uc3QgZXJyb3JLZXlzID0gT2JqZWN0LmtleXMoY29udHJvbC5lcnJvcnMpO1xuICAgICAgICAgICAgbGV0IGlzSW52YWxpZCA9IGZhbHNlO1xuXG4gICAgICAgICAgICBmb3IgKGNvbnN0IGVycm9yS2V5IG9mIGVycm9yS2V5cykge1xuICAgICAgICAgICAgICAgIGlmICh0aGlzLm1lc3NhZ2VzW2NvbnRyb2xLZXldW2Vycm9yS2V5XSkge1xuICAgICAgICAgICAgICAgICAgICBpc0ludmFsaWQgPSB0cnVlO1xuICAgICAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICByZXR1cm4gY29udHJvbC5pbnZhbGlkICYmIGlzSW52YWxpZCAmJiAoY29udHJvbC5kaXJ0eSB8fCBjb250cm9sLnRvdWNoZWQpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgb2JqZWN0VG9LZXlzKHZhbHVlOiBhbnkpOiBzdHJpbmdbXSB7XG4gICAgICAgIGlmICghdmFsdWUpIHtcbiAgICAgICAgICAgIHJldHVybiB2YWx1ZTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gT2JqZWN0LmtleXModmFsdWUpO1xuICAgIH1cbn1cbiJdfQ==