ngx-form-validator
Version:
A library for form validator specifically for Angular 2+ Usage for Reactive Forms
77 lines • 8.65 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
import { Subject } from 'rxjs/index';
import { takeUntil } from 'rxjs/internal/operators';
import { AbstractControl } from '@angular/forms';
var NgxFormValidatorComponent = /** @class */ (function () {
function NgxFormValidatorComponent() {
this.destroy$ = new Subject();
}
/**
* @return {?}
*/
NgxFormValidatorComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initControl();
};
/**
* @return {?}
*/
NgxFormValidatorComponent.prototype.initControl = /**
* @return {?}
*/
function () {
var _this = this;
this.control.statusChanges
.pipe(takeUntil(this.destroy$))
.subscribe(function (newValue) {
_this.error = _this.control.errors
? window['Object'].keys(_this.control.errors)[0]
: null;
});
this.error = this.control.errors
? window['Object'].keys(this.control.errors)[0]
: null;
};
/**
* @return {?}
*/
NgxFormValidatorComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next(true);
this.destroy$.unsubscribe();
};
NgxFormValidatorComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-form-validator',
template: "\n <div *ngIf=\"control?.invalid && control?.touched\"\n class=\"alert-text\"\n >\n <div [ngSwitch]=\"error\">\n <div *ngSwitchCase=\"'required'\"><div>Required field</div></div>\n <div *ngSwitchCase=\"'maxlength'\">\n <div\n *ngIf=\"control.errors.maxlength.requiredLength; else maxLength_zero\"\n >\n Must contain from 1 to\n {{ control.errors.maxlength.requiredLength }} symbols\n </div>\n <ng-template #maxLength_zero>\n Must contain at least\n {{ control.errors.maxlength.requiredLength }} symbols\n </ng-template>\n </div>\n <div *ngSwitchCase=\"'minlength'\">\n Must contain at least\n {{ control.errors.minlength.requiredLength }} symbols\n </div>\n <div *ngSwitchCase=\"'email'\">Enter a valid Email</div>\n <div *ngSwitchCase=\"'pattern'\">\n Enter a valid {{ propName || 'value' }}\n </div>\n <div *ngSwitchDefault>Required correct field</div>\n </div>\n </div>\n ",
styles: ["\n .alert-text {\n position: absolute;\n width: 100%;\n text-align: right;\n color: #980000;\n background-color: transparent;\n font-size: 13px;\n }\n "]
}] }
];
/** @nocollapse */
NgxFormValidatorComponent.ctorParameters = function () { return []; };
NgxFormValidatorComponent.propDecorators = {
control: [{ type: Input }],
propName: [{ type: Input }]
};
return NgxFormValidatorComponent;
}());
export { NgxFormValidatorComponent };
if (false) {
/** @type {?} */
NgxFormValidatorComponent.prototype.control;
/** @type {?} */
NgxFormValidatorComponent.prototype.propName;
/** @type {?} */
NgxFormValidatorComponent.prototype.error;
/** @type {?} */
NgxFormValidatorComponent.prototype.destroy$;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZvcm0tdmFsaWRhdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mb3JtLXZhbGlkYXRvci8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtZm9ybS12YWxpZGF0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLFlBQVksQ0FBQztBQUNyQyxPQUFPLEVBQVEsU0FBUyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGVBQWUsRUFBYSxNQUFNLGdCQUFnQixDQUFDO0FBRTVEO0lBcURFO1FBRkEsYUFBUSxHQUFxQixJQUFJLE9BQU8sRUFBVyxDQUFDO0lBRXJDLENBQUM7Ozs7SUFFaEIsNENBQVE7OztJQUFSO1FBQ0UsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7Ozs7SUFFRCwrQ0FBVzs7O0lBQVg7UUFBQSxpQkFXQztRQVZDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYTthQUN2QixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsVUFBQSxRQUFRO1lBQ2pCLEtBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNO2dCQUM5QixDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDL0MsQ0FBQyxDQUFDLElBQUksQ0FBQztRQUNYLENBQUMsQ0FBQyxDQUFDO1FBQ0wsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU07WUFDOUIsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDL0MsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNYLENBQUM7Ozs7SUFFRCwrQ0FBVzs7O0lBQVg7UUFDRSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN6QixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzlCLENBQUM7O2dCQTNFRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsUUFBUSxFQUFFLG9rQ0E2QlQ7NkJBRUMsZ05BU0M7aUJBRUo7Ozs7OzBCQUVFLEtBQUs7MkJBRUwsS0FBSzs7SUE0QlIsZ0NBQUM7Q0FBQSxBQTVFRCxJQTRFQztTQS9CWSx5QkFBeUI7OztJQUNwQyw0Q0FDeUI7O0lBQ3pCLDZDQUNpQjs7SUFDakIsMENBQVc7O0lBQ1gsNkNBQW9EIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMvaW5kZXgnO1xuaW1wb3J0IHsgdGFrZSwgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9pbnRlcm5hbC9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgQWJzdHJhY3RDb250cm9sLCBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1mb3JtLXZhbGlkYXRvcicsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiAqbmdJZj1cImNvbnRyb2w/LmludmFsaWQgJiYgY29udHJvbD8udG91Y2hlZFwiXG4gICAgICBjbGFzcz1cImFsZXJ0LXRleHRcIlxuICAgID5cbiAgICAgIDxkaXYgW25nU3dpdGNoXT1cImVycm9yXCI+XG4gICAgICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIidyZXF1aXJlZCdcIj48ZGl2PlJlcXVpcmVkIGZpZWxkPC9kaXY+PC9kaXY+XG4gICAgICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIidtYXhsZW5ndGgnXCI+XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgKm5nSWY9XCJjb250cm9sLmVycm9ycy5tYXhsZW5ndGgucmVxdWlyZWRMZW5ndGg7IGVsc2UgbWF4TGVuZ3RoX3plcm9cIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIE11c3QgY29udGFpbiBmcm9tIDEgdG9cbiAgICAgICAgICAgIHt7IGNvbnRyb2wuZXJyb3JzLm1heGxlbmd0aC5yZXF1aXJlZExlbmd0aCB9fSBzeW1ib2xzXG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlICNtYXhMZW5ndGhfemVybz5cbiAgICAgICAgICAgIE11c3QgY29udGFpbiBhdCBsZWFzdFxuICAgICAgICAgICAge3sgY29udHJvbC5lcnJvcnMubWF4bGVuZ3RoLnJlcXVpcmVkTGVuZ3RoIH19IHN5bWJvbHNcbiAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiJ21pbmxlbmd0aCdcIj5cbiAgICAgICAgICBNdXN0IGNvbnRhaW4gYXQgbGVhc3RcbiAgICAgICAgICB7eyBjb250cm9sLmVycm9ycy5taW5sZW5ndGgucmVxdWlyZWRMZW5ndGggfX0gc3ltYm9sc1xuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiJ2VtYWlsJ1wiPkVudGVyIGEgdmFsaWQgRW1haWw8L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiJ3BhdHRlcm4nXCI+XG4gICAgICAgICAgRW50ZXIgYSB2YWxpZCB7eyBwcm9wTmFtZSB8fCAndmFsdWUnIH19XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2ICpuZ1N3aXRjaERlZmF1bHQ+UmVxdWlyZWQgY29ycmVjdCBmaWVsZDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAgIC5hbGVydC10ZXh0IHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgdGV4dC1hbGlnbjogcmlnaHQ7XG4gICAgICAgIGNvbG9yOiAjOTgwMDAwO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgZm9udC1zaXplOiAxM3B4O1xuICAgICAgfVxuICAgIGBcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hGb3JtVmFsaWRhdG9yQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKVxuICBjb250cm9sOiBBYnN0cmFjdENvbnRyb2w7XG4gIEBJbnB1dCgpXG4gIHByb3BOYW1lOiBzdHJpbmc7XG4gIGVycm9yOiBhbnk7XG4gIGRlc3Ryb3kkOiBTdWJqZWN0PGJvb2xlYW4+ID0gbmV3IFN1YmplY3Q8Ym9vbGVhbj4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5pbml0Q29udHJvbCgpO1xuICB9XG5cbiAgaW5pdENvbnRyb2woKSB7XG4gICAgdGhpcy5jb250cm9sLnN0YXR1c0NoYW5nZXNcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgIC5zdWJzY3JpYmUobmV3VmFsdWUgPT4ge1xuICAgICAgICB0aGlzLmVycm9yID0gdGhpcy5jb250cm9sLmVycm9yc1xuICAgICAgICAgID8gd2luZG93WydPYmplY3QnXS5rZXlzKHRoaXMuY29udHJvbC5lcnJvcnMpWzBdXG4gICAgICAgICAgOiBudWxsO1xuICAgICAgfSk7XG4gICAgdGhpcy5lcnJvciA9IHRoaXMuY29udHJvbC5lcnJvcnNcbiAgICAgID8gd2luZG93WydPYmplY3QnXS5rZXlzKHRoaXMuY29udHJvbC5lcnJvcnMpWzBdXG4gICAgICA6IG51bGw7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQodHJ1ZSk7XG4gICAgdGhpcy5kZXN0cm95JC51bnN1YnNjcmliZSgpO1xuICB9XG59XG4iXX0=