ngx-form-validator
Version:
A library for form validator specifically for Angular 2+ Usage for Reactive Forms
103 lines • 8.07 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';
export class NgxFormValidatorComponent {
constructor() {
this.destroy$ = new Subject();
}
/**
* @return {?}
*/
ngOnInit() {
this.initControl();
}
/**
* @return {?}
*/
initControl() {
this.control.statusChanges
.pipe(takeUntil(this.destroy$))
.subscribe(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 {?}
*/
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.unsubscribe();
}
}
NgxFormValidatorComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-form-validator',
template: `
<div *ngIf="control?.invalid && control?.touched"
class="alert-text"
>
<div [ngSwitch]="error">
<div *ngSwitchCase="'required'"><div>Required field</div></div>
<div *ngSwitchCase="'maxlength'">
<div
*ngIf="control.errors.maxlength.requiredLength; else maxLength_zero"
>
Must contain from 1 to
{{ control.errors.maxlength.requiredLength }} symbols
</div>
<ng-template #maxLength_zero>
Must contain at least
{{ control.errors.maxlength.requiredLength }} symbols
</ng-template>
</div>
<div *ngSwitchCase="'minlength'">
Must contain at least
{{ control.errors.minlength.requiredLength }} symbols
</div>
<div *ngSwitchCase="'email'">Enter a valid Email</div>
<div *ngSwitchCase="'pattern'">
Enter a valid {{ propName || 'value' }}
</div>
<div *ngSwitchDefault>Required correct field</div>
</div>
</div>
`,
styles: [`
.alert-text {
position: absolute;
width: 100%;
text-align: right;
color: #980000;
background-color: transparent;
font-size: 13px;
}
`]
}] }
];
/** @nocollapse */
NgxFormValidatorComponent.ctorParameters = () => [];
NgxFormValidatorComponent.propDecorators = {
control: [{ type: Input }],
propName: [{ type: Input }]
};
if (false) {
/** @type {?} */
NgxFormValidatorComponent.prototype.control;
/** @type {?} */
NgxFormValidatorComponent.prototype.propName;
/** @type {?} */
NgxFormValidatorComponent.prototype.error;
/** @type {?} */
NgxFormValidatorComponent.prototype.destroy$;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZvcm0tdmFsaWRhdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mb3JtLXZhbGlkYXRvci8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtZm9ybS12YWxpZGF0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLFlBQVksQ0FBQztBQUNyQyxPQUFPLEVBQVEsU0FBUyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGVBQWUsRUFBYSxNQUFNLGdCQUFnQixDQUFDO0FBK0M1RCxNQUFNLE9BQU8seUJBQXlCO0lBUXBDO1FBRkEsYUFBUSxHQUFxQixJQUFJLE9BQU8sRUFBVyxDQUFDO0lBRXJDLENBQUM7Ozs7SUFFaEIsUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDOzs7O0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYTthQUN2QixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUM5QixTQUFTLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDcEIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU07Z0JBQzlCLENBQUMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO2dCQUMvQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ1gsQ0FBQyxDQUFDLENBQUM7UUFDTCxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTTtZQUM5QixDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUMvQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQ1gsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN6QixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzlCLENBQUM7OztZQTNFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTZCVDt5QkFFQzs7Ozs7Ozs7O0tBU0M7YUFFSjs7Ozs7c0JBRUUsS0FBSzt1QkFFTCxLQUFLOzs7O0lBRk4sNENBQ3lCOztJQUN6Qiw2Q0FDaUI7O0lBQ2pCLDBDQUFXOztJQUNYLDZDQUFvRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5qZWN0LCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzL2luZGV4JztcbmltcG9ydCB7IHRha2UsIHRha2VVbnRpbCB9IGZyb20gJ3J4anMvaW50ZXJuYWwvb3BlcmF0b3JzJztcbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCwgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtZm9ybS12YWxpZGF0b3InLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgKm5nSWY9XCJjb250cm9sPy5pbnZhbGlkICYmIGNvbnRyb2w/LnRvdWNoZWRcIlxuICAgICAgY2xhc3M9XCJhbGVydC10ZXh0XCJcbiAgICA+XG4gICAgICA8ZGl2IFtuZ1N3aXRjaF09XCJlcnJvclwiPlxuICAgICAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCIncmVxdWlyZWQnXCI+PGRpdj5SZXF1aXJlZCBmaWVsZDwvZGl2PjwvZGl2PlxuICAgICAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCInbWF4bGVuZ3RoJ1wiPlxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICpuZ0lmPVwiY29udHJvbC5lcnJvcnMubWF4bGVuZ3RoLnJlcXVpcmVkTGVuZ3RoOyBlbHNlIG1heExlbmd0aF96ZXJvXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICBNdXN0IGNvbnRhaW4gZnJvbSAxIHRvXG4gICAgICAgICAgICB7eyBjb250cm9sLmVycm9ycy5tYXhsZW5ndGgucmVxdWlyZWRMZW5ndGggfX0gc3ltYm9sc1xuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjbWF4TGVuZ3RoX3plcm8+XG4gICAgICAgICAgICBNdXN0IGNvbnRhaW4gYXQgbGVhc3RcbiAgICAgICAgICAgIHt7IGNvbnRyb2wuZXJyb3JzLm1heGxlbmd0aC5yZXF1aXJlZExlbmd0aCB9fSBzeW1ib2xzXG4gICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIidtaW5sZW5ndGgnXCI+XG4gICAgICAgICAgTXVzdCBjb250YWluIGF0IGxlYXN0XG4gICAgICAgICAge3sgY29udHJvbC5lcnJvcnMubWlubGVuZ3RoLnJlcXVpcmVkTGVuZ3RoIH19IHN5bWJvbHNcbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIidlbWFpbCdcIj5FbnRlciBhIHZhbGlkIEVtYWlsPC9kaXY+XG4gICAgICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIidwYXR0ZXJuJ1wiPlxuICAgICAgICAgIEVudGVyIGEgdmFsaWQge3sgcHJvcE5hbWUgfHwgJ3ZhbHVlJyB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdTd2l0Y2hEZWZhdWx0PlJlcXVpcmVkIGNvcnJlY3QgZmllbGQ8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuYWxlcnQtdGV4dCB7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIHRleHQtYWxpZ246IHJpZ2h0O1xuICAgICAgICBjb2xvcjogIzk4MDAwMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgIGZvbnQtc2l6ZTogMTNweDtcbiAgICAgIH1cbiAgICBgXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTmd4Rm9ybVZhbGlkYXRvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KClcbiAgY29udHJvbDogQWJzdHJhY3RDb250cm9sO1xuICBASW5wdXQoKVxuICBwcm9wTmFtZTogc3RyaW5nO1xuICBlcnJvcjogYW55O1xuICBkZXN0cm95JDogU3ViamVjdDxib29sZWFuPiA9IG5ldyBTdWJqZWN0PGJvb2xlYW4+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuaW5pdENvbnRyb2woKTtcbiAgfVxuXG4gIGluaXRDb250cm9sKCkge1xuICAgIHRoaXMuY29udHJvbC5zdGF0dXNDaGFuZ2VzXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpXG4gICAgICAuc3Vic2NyaWJlKG5ld1ZhbHVlID0+IHtcbiAgICAgICAgdGhpcy5lcnJvciA9IHRoaXMuY29udHJvbC5lcnJvcnNcbiAgICAgICAgICA/IHdpbmRvd1snT2JqZWN0J10ua2V5cyh0aGlzLmNvbnRyb2wuZXJyb3JzKVswXVxuICAgICAgICAgIDogbnVsbDtcbiAgICAgIH0pO1xuICAgIHRoaXMuZXJyb3IgPSB0aGlzLmNvbnRyb2wuZXJyb3JzXG4gICAgICA/IHdpbmRvd1snT2JqZWN0J10ua2V5cyh0aGlzLmNvbnRyb2wuZXJyb3JzKVswXVxuICAgICAgOiBudWxsO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5kZXN0cm95JC5uZXh0KHRydWUpO1xuICAgIHRoaXMuZGVzdHJveSQudW5zdWJzY3JpYmUoKTtcbiAgfVxufVxuIl19