angular-reactive-validation
Version:
Reactive Forms validation shouldn't require the developer to write lots of HTML to show validation messages. This library makes it easy.
63 lines • 8.66 kB
JavaScript
import { Component, Input, ViewEncapsulation, Optional } from '@angular/core';
import { getFormControlFromContainer, isControlContainerVoidOrInitialized } from '../get-form-control-from-container';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
/**
* The ValidationMessageComponent lets the developer specify a custom visual style and custom error message
* for edge-cases where the standard style or message capabilities do not suffice.
*
* TODO: Trigger revalidation by parent whenever [for] changes.
*/
export class ValidationMessageComponent {
set for(control) {
if (!isControlContainerVoidOrInitialized(this.controlContainer)) {
this.initializeForOnInit = () => this.for = control;
return;
}
this._for = typeof control === 'string' ? getFormControlFromContainer(control, this.controlContainer) : control;
}
get for() {
return this._for;
}
constructor(controlContainer) {
this.controlContainer = controlContainer;
this.initializeForOnInit = () => { };
}
ngOnInit() {
this.initializeForOnInit();
}
canHandle(error) {
return (!this.for || error.control === this.for) && error.key === this.key;
}
show(error) {
this._context = error.errorObject;
}
reset() {
this._context = undefined;
}
/**
* The ValidationErrors object that contains contextual information about the error, which can be used for
* displaying, e.g. the minimum length within the error message.
*/
get context() {
return this._context;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ValidationMessageComponent, deps: [{ token: i1.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: ValidationMessageComponent, selector: "arv-validation-message", inputs: { for: "for", key: "key" }, ngImport: i0, template: "<div *ngIf=\"context\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ValidationMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'arv-validation-message', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"context\">\n <ng-content></ng-content>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.ControlContainer, decorators: [{
type: Optional
}] }], propDecorators: { for: [{
type: Input
}],
/**
* The name of the returned validation object property for which the custom validation message should be shown.
*/
key: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsaWRhdGlvbi1tZXNzYWdlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItcmVhY3RpdmUtdmFsaWRhdGlvbi9zcmMvbGliL3ZhbGlkYXRpb24tbWVzc2FnZS92YWxpZGF0aW9uLW1lc3NhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1yZWFjdGl2ZS12YWxpZGF0aW9uL3NyYy9saWIvdmFsaWRhdGlvbi1tZXNzYWdlL3ZhbGlkYXRpb24tbWVzc2FnZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRSxRQUFRLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFJdEYsT0FBTyxFQUFFLDJCQUEyQixFQUFFLG1DQUFtQyxFQUFFLE1BQU0sb0NBQW9DLENBQUM7Ozs7QUFPdEg7Ozs7O0dBS0c7QUFDSCxNQUFNLE9BQU8sMEJBQTBCO0lBRXJDLElBS0ksR0FBRyxDQUFDLE9BQWdEO1FBQ3RELElBQUksQ0FBQyxtQ0FBbUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsRUFBRSxDQUFDO1lBQ2hFLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxHQUFHLE9BQU8sQ0FBQztZQUNwRCxPQUFPO1FBQ1QsQ0FBQztRQUNELElBQUksQ0FBQyxJQUFJLEdBQUcsT0FBTyxPQUFPLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQywyQkFBMkIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQztJQUNsSCxDQUFDO0lBQ0QsSUFBSSxHQUFHO1FBQ0wsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ25CLENBQUM7SUFXRCxZQUFnQyxnQkFBa0M7UUFBbEMscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQWtCMUQsd0JBQW1CLEdBQUcsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBbEIrQixDQUFDO0lBRXZFLFFBQVE7UUFDTixJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQXNCO1FBQzlCLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLElBQUksS0FBSyxDQUFDLE9BQU8sS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDO0lBQzdFLENBQUM7SUFFRCxJQUFJLENBQUMsS0FBc0I7UUFDekIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLFFBQVEsR0FBRyxTQUFTLENBQUM7SUFDNUIsQ0FBQztJQUlEOzs7T0FHRztJQUNILElBQUksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUN2QixDQUFDOzhHQXJEVSwwQkFBMEI7a0dBQTFCLDBCQUEwQixrR0NqQnZDLGdFQUdBOzsyRkRjYSwwQkFBMEI7a0JBWHRDLFNBQVM7K0JBQ0Usd0JBQXdCLGlCQUVuQixpQkFBaUIsQ0FBQyxJQUFJOzswQkFtQ3hCLFFBQVE7eUNBcEJqQixHQUFHO3NCQUxOLEtBQUs7O1FBaUJOOztXQUVHO1FBQ0gsR0FBRztzQkFKRixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24sIE9wdGlvbmFsLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFVudHlwZWRGb3JtQ29udHJvbCwgVmFsaWRhdGlvbkVycm9ycywgQ29udHJvbENvbnRhaW5lciB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgVmFsaWRhdGlvbkVycm9yIH0gZnJvbSAnLi4vdmFsaWRhdGlvbi1lcnJvcic7XG5pbXBvcnQgeyBnZXRGb3JtQ29udHJvbEZyb21Db250YWluZXIsIGlzQ29udHJvbENvbnRhaW5lclZvaWRPckluaXRpYWxpemVkIH0gZnJvbSAnLi4vZ2V0LWZvcm0tY29udHJvbC1mcm9tLWNvbnRhaW5lcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Fydi12YWxpZGF0aW9uLW1lc3NhZ2UnLFxuICB0ZW1wbGF0ZVVybDogJy4vdmFsaWRhdGlvbi1tZXNzYWdlLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbi8qKlxuICogVGhlIFZhbGlkYXRpb25NZXNzYWdlQ29tcG9uZW50IGxldHMgdGhlIGRldmVsb3BlciBzcGVjaWZ5IGEgY3VzdG9tIHZpc3VhbCBzdHlsZSBhbmQgY3VzdG9tIGVycm9yIG1lc3NhZ2VcbiAqIGZvciBlZGdlLWNhc2VzIHdoZXJlIHRoZSBzdGFuZGFyZCBzdHlsZSBvciBtZXNzYWdlIGNhcGFiaWxpdGllcyBkbyBub3Qgc3VmZmljZS5cbiAqXG4gKiBUT0RPOiBUcmlnZ2VyIHJldmFsaWRhdGlvbiBieSBwYXJlbnQgd2hlbmV2ZXIgW2Zvcl0gY2hhbmdlcy5cbiAqL1xuZXhwb3J0IGNsYXNzIFZhbGlkYXRpb25NZXNzYWdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKVxuICAvKipcbiAgICogVGhlIEZvcm1Db250cm9sIGZvciB3aGljaCBhIGN1c3RvbSB2YWxpZGF0aW9uIG1lc3NhZ2Ugc2hvdWxkIGJlIHNob3duLiBUaGlzIGlzIG9ubHkgcmVxdWlyZWQgd2hlbiB0aGUgcGFyZW50XG4gICAqIFZhbGlkYXRpb25NZXNzYWdlc0NvbXBvbmVudCBoYXMgbXVsdGlwbGUgRm9ybUNvbnRyb2xzIHNwZWNpZmllZC5cbiAgICovXG4gIHNldCBmb3IoY29udHJvbDogVW50eXBlZEZvcm1Db250cm9sIHwgc3RyaW5nIHwgdW5kZWZpbmVkKSB7XG4gICAgaWYgKCFpc0NvbnRyb2xDb250YWluZXJWb2lkT3JJbml0aWFsaXplZCh0aGlzLmNvbnRyb2xDb250YWluZXIpKSB7XG4gICAgICB0aGlzLmluaXRpYWxpemVGb3JPbkluaXQgPSAoKSA9PiB0aGlzLmZvciA9IGNvbnRyb2w7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuX2ZvciA9IHR5cGVvZiBjb250cm9sID09PSAnc3RyaW5nJyA/IGdldEZvcm1Db250cm9sRnJvbUNvbnRhaW5lcihjb250cm9sLCB0aGlzLmNvbnRyb2xDb250YWluZXIpIDogY29udHJvbDtcbiAgfVxuICBnZXQgZm9yKCk6IFVudHlwZWRGb3JtQ29udHJvbCB8IHN0cmluZyB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMuX2ZvcjtcbiAgfVxuXG4gIEBJbnB1dCgpXG4gIC8qKlxuICAgKiBUaGUgbmFtZSBvZiB0aGUgcmV0dXJuZWQgdmFsaWRhdGlvbiBvYmplY3QgcHJvcGVydHkgZm9yIHdoaWNoIHRoZSBjdXN0b20gdmFsaWRhdGlvbiBtZXNzYWdlIHNob3VsZCBiZSBzaG93bi5cbiAgICovXG4gIGtleTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIHByaXZhdGUgX2NvbnRleHQ6IFZhbGlkYXRpb25FcnJvcnMgfCB1bmRlZmluZWQ7XG4gIHByaXZhdGUgX2ZvcjogVW50eXBlZEZvcm1Db250cm9sIHwgdW5kZWZpbmVkO1xuXG4gIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIHByaXZhdGUgY29udHJvbENvbnRhaW5lcjogQ29udHJvbENvbnRhaW5lcikgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5pbml0aWFsaXplRm9yT25Jbml0KCk7XG4gIH1cblxuICBjYW5IYW5kbGUoZXJyb3I6IFZhbGlkYXRpb25FcnJvcikge1xuICAgIHJldHVybiAoIXRoaXMuZm9yIHx8IGVycm9yLmNvbnRyb2wgPT09IHRoaXMuZm9yKSAmJiBlcnJvci5rZXkgPT09IHRoaXMua2V5O1xuICB9XG5cbiAgc2hvdyhlcnJvcjogVmFsaWRhdGlvbkVycm9yKSB7XG4gICAgdGhpcy5fY29udGV4dCA9IGVycm9yLmVycm9yT2JqZWN0O1xuICB9XG5cbiAgcmVzZXQoKSB7XG4gICAgdGhpcy5fY29udGV4dCA9IHVuZGVmaW5lZDtcbiAgfVxuXG4gIHByaXZhdGUgaW5pdGlhbGl6ZUZvck9uSW5pdCA9ICgpID0+IHt9O1xuXG4gIC8qKlxuICAgKiBUaGUgVmFsaWRhdGlvbkVycm9ycyBvYmplY3QgdGhhdCBjb250YWlucyBjb250ZXh0dWFsIGluZm9ybWF0aW9uIGFib3V0IHRoZSBlcnJvciwgd2hpY2ggY2FuIGJlIHVzZWQgZm9yXG4gICAqIGRpc3BsYXlpbmcsIGUuZy4gdGhlIG1pbmltdW0gbGVuZ3RoIHdpdGhpbiB0aGUgZXJyb3IgbWVzc2FnZS5cbiAgICovXG4gIGdldCBjb250ZXh0KCk6IGFueSB7XG4gICAgcmV0dXJuIHRoaXMuX2NvbnRleHQ7XG4gIH1cbn1cbiIsIjxkaXYgKm5nSWY9XCJjb250ZXh0XCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19