ngx-form-validator-super
Version:
A super flexible and time saving Validation logic handeling directive for Angular Reactive forms.
116 lines • 13.2 kB
JavaScript
import { Directive, ElementRef, Optional, HostListener, Input } from '@angular/core';
import { NgControl, NgModel, ControlContainer } from '@angular/forms';
import { ValidatorLogic } from './validator-logic';
export class NGXFormValidator {
constructor(controlContainer, ValidatorLogic, ele) {
this.controlContainer = controlContainer;
this.ValidatorLogic = ValidatorLogic;
this.ele = ele;
this.btnClickHandler = (event) => {
event.preventDefault();
this.CallValidation(event.target);
};
this.SetMutationOserver();
}
ngOnInit() {
}
SetMutationOserver() {
if (!this.ele) {
return;
}
let observer = new MutationObserver((mutations) => {
let buttons = this.GetSubmitButtons();
if (buttons && buttons.length > 0) {
buttons.forEach(button => {
this.OnSubmitBtnClick(button);
});
}
});
observer.observe(this.ele.nativeElement, { childList: true, subtree: true, attributes: true });
}
GetSubmitButtons() {
if (!this.ele) {
return;
}
let submitButtons = this.ele.nativeElement.querySelectorAll("button[type=submit]");
return submitButtons;
}
OnSubmitBtnClick(btnRef) {
btnRef.removeEventListener('click', this.btnClickHandler);
btnRef.addEventListener('click', this.btnClickHandler);
}
CallValidation(target) {
this.ValidatorLogic.formControl = this.controlContainer;
if (!this.ValidatorLogic.ValidateControls(null)) {
target.removeEventListener('click', this.btnClickHandler);
target.click();
}
}
change(event) {
this.ValidatorLogic.formControl = this.controlContainer;
if (event.srcElement.attributes.formcontrolname) {
this.ValidatorLogic.ValidateControls(event.srcElement);
}
}
submit(e) {
//e.currentTarget.stopPropagation();
//this.ValidatorLogic.formControl = this.controlContainer
// this.ValidatorLogic.ValidateControls(null);
// e.target.onSubmit=null;
return false;
}
openPanel() {
this.ValidatorLogic.formControl = this.controlContainer;
this.ValidatorLogic.TogglePanel();
}
}
NGXFormValidator.decorators = [
{ type: Directive, args: [{
selector: '[ngxValidator]'
},] }
];
NGXFormValidator.ctorParameters = () => [
{ type: ControlContainer },
{ type: ValidatorLogic },
{ type: ElementRef }
];
NGXFormValidator.propDecorators = {
change: [{ type: HostListener, args: ["change", ["$event"],] }],
submit: [{ type: HostListener, args: ["submit", ["$event"],] }],
openPanel: [{ type: HostListener, args: ['document:keydown.shift.f8', ['$event'],] }]
};
export class NativeElementInjectorDirective {
constructor(el, control, model) {
this.el = el;
this.control = control;
this.model = model;
this.appendNativeElement();
}
onChange(event) {
this.appendNativeElement();
}
ngAfterViewInit() {
this.appendNativeElement();
}
appendNativeElement() {
if (!!this.model)
this.model.control.nativeElement = this.el.nativeElement;
else if (this.control.control)
this.control.control.nativeElement = this.el.nativeElement;
}
}
NativeElementInjectorDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngModel], [formControl], [formControlName]',
},] }
];
NativeElementInjectorDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: NgControl },
{ type: NgModel, decorators: [{ type: Optional }] }
];
NativeElementInjectorDirective.propDecorators = {
validationContainerId: [{ type: Input, args: ['validationContainerId',] }],
onChange: [{ type: HostListener, args: ['change', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsaWRhdG9yLWRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1mb3JtLXZhbGlkYXRvci9zcmMvbGliL0RpcmVjdGl2ZS92YWxpZGF0b3ItZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxZQUFZLEVBQW9CLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RyxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGdCQUFnQixDQUFBO0FBQ3JFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUtuRCxNQUFNLE9BQU8sZ0JBQWdCO0lBRzNCLFlBQW9CLGdCQUFrQyxFQUFRLGNBQThCLEVBQVMsR0FBYztRQUEvRixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBQVEsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBQVMsUUFBRyxHQUFILEdBQUcsQ0FBVztRQThDOUcsb0JBQWUsR0FBRSxDQUFDLEtBQVMsRUFBQyxFQUFFO1lBRW5DLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUNuQyxDQUFDLENBQUE7UUEvQ0MsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFFMUIsQ0FBQztJQUNELFFBQVE7SUFFVCxDQUFDO0lBSU8sa0JBQWtCO1FBRXpCLElBQUcsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFDO1lBQUUsT0FBTztTQUFFO1FBQ3hCLElBQUksUUFBUSxHQUFHLElBQUksZ0JBQWdCLENBQUMsQ0FBQyxTQUFTLEVBQUMsRUFBRTtZQUU3QyxJQUFJLE9BQU8sR0FBRyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztZQUN0QyxJQUFHLE9B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ZUFBZTtRQUViLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFTyxtQkFBbUI7UUFDekIsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUs7WUFDUixJQUFJLENBQUMsS0FBSyxDQUFDLE9BQVEsQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7YUFDN0QsSUFBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU87WUFDcEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFRLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDO0lBR3RFLENBQUM7OztZQTdCRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLDZDQUE2QzthQUN4RDs7O1lBbEhtQixVQUFVO1lBQ3JCLFNBQVM7WUFBRSxPQUFPLHVCQW1Id0MsUUFBUTs7O29DQUt4RSxLQUFLLFNBQUMsdUJBQXVCO3VCQUc3QixZQUFZLFNBQUMsUUFBUSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3RyaW5naWZ5IH0gZnJvbSAnQGFuZ3VsYXIvY29tcGlsZXIvc3JjL3V0aWwnO1xyXG5pbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIE9wdGlvbmFsLCBIb3N0TGlzdGVuZXIsIFZpZXdDb250YWluZXJSZWYsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5nQ29udHJvbCwgTmdNb2RlbCwgQ29udHJvbENvbnRhaW5lciB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJ1xyXG5pbXBvcnQgeyBWYWxpZGF0b3JMb2dpYyB9IGZyb20gJy4vdmFsaWRhdG9yLWxvZ2ljJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW25neFZhbGlkYXRvcl0nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOR1hGb3JtVmFsaWRhdG9yIHtcclxuXHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY29udHJvbENvbnRhaW5lcjogQ29udHJvbENvbnRhaW5lcixwdWJsaWMgVmFsaWRhdG9yTG9naWM6IFZhbGlkYXRvckxvZ2ljLHByaXZhdGUgZWxlOkVsZW1lbnRSZWYpIHtcclxuXHJcblxyXG4gIHRoaXMuU2V0TXV0YXRpb25Pc2VydmVyKCk7XHJcblxyXG4gIH1cclxuICBuZ09uSW5pdCgpIHtcclxuXHJcbiB9XHJcblxyXG5cclxuXHJcbiBwcml2YXRlIFNldE11dGF0aW9uT3NlcnZlcigpe1xyXG5cclxuICBpZighdGhpcy5lbGUpeyByZXR1cm47IH1cclxuICBsZXQgb2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcigobXV0YXRpb25zKT0+e1xyXG5cclxuICAgICAgbGV0IGJ1dHRvbnMgPSB0aGlzLkdldFN1Ym1pdEJ1dHRvbnMoKTtcclxuICAgICAgaWYoYnV0dG9ucyAmJiBidXR0b25zLmxlbmd0aD4wKXtcclxuICAgICAgICBidXR0b25zLmZvckVhY2goYnV0dG9uPT57XHJcblxyXG4gICAgICAgICAgdGhpcy5PblN1Ym1pdEJ0bkNsaWNrKGJ1dHRvbik7XHJcbiAgICAgICAgfSlcclxuICAgICAgfVxyXG5cclxuICB9KTtcclxuICBvYnNlcnZlci5vYnNlcnZlKHRoaXMuZWxlLm5hdGl2ZUVsZW1lbnQse2NoaWxkTGlzdDp0cnVlLHN1YnRyZWU6dHJ1ZSxhdHRyaWJ1dGVzOnRydWV9KVxyXG59XHJcblxyXG5wcml2YXRlIEdldFN1Ym1pdEJ1dHRvbnMoKTphbnlbXXtcclxuXHJcbiAgaWYoIXRoaXMuZWxlKXsgcmV0dXJuIDt9XHJcblxyXG4gIGxldCBzdWJtaXRCdXR0b25zID0gdGhpcy5lbGUubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yQWxsKFwiYnV0dG9uW3R5cGU9c3VibWl0XVwiKTtcclxuXHJcbiAgcmV0dXJuIHN1Ym1pdEJ1dHRvbnM7XHJcbn1cclxuXHJcbnByaXZhdGUgT25TdWJtaXRCdG5DbGljayhidG5SZWYpe1xyXG5cclxuICAgYnRuUmVmLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJyx0aGlzLmJ0bkNsaWNrSGFuZGxlcilcclxuXHJcbiAgIGJ0blJlZi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsdGhpcy5idG5DbGlja0hhbmRsZXIpXHJcblxyXG59XHJcblxyXG5wdWJsaWMgYnRuQ2xpY2tIYW5kbGVyID0oZXZlbnQ6YW55KT0+e1xyXG5cclxuICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gIHRoaXMuQ2FsbFZhbGlkYXRpb24oZXZlbnQudGFyZ2V0KVxyXG59XHJcblxyXG5wcml2YXRlIENhbGxWYWxpZGF0aW9uKHRhcmdldCl7XHJcblxyXG4gIHRoaXMuVmFsaWRhdG9yTG9naWMuZm9ybUNvbnRyb2wgPSB0aGlzLmNvbnRyb2xDb250YWluZXJcclxuICBpZighdGhpcy5WYWxpZGF0b3JMb2dpYy5WYWxpZGF0ZUNvbnRyb2xzKG51bGwpKXtcclxuICAgIHRhcmdldC5yZW1vdmVFdmVudExpc3RlbmVyKCdjbGljaycsdGhpcy5idG5DbGlja0hhbmRsZXIpXHJcbiAgICB0YXJnZXQuY2xpY2soKTtcclxuICB9XHJcblxyXG59XHJcblxyXG5cclxuXHJcblxyXG5cclxuXHJcblxyXG5cclxuICBASG9zdExpc3RlbmVyKFwiY2hhbmdlXCIsIFtcIiRldmVudFwiXSkgY2hhbmdlKGV2ZW50KSB7XHJcblxyXG4gICAgdGhpcy5WYWxpZGF0b3JMb2dpYy5mb3JtQ29udHJvbCA9IHRoaXMuY29udHJvbENvbnRhaW5lcjtcclxuICAgIGlmIChldmVudC5zcmNFbGVtZW50LmF0dHJpYnV0ZXMuZm9ybWNvbnRyb2xuYW1lKSB7XHJcbiAgICAgIHRoaXMuVmFsaWRhdG9yTG9naWMuVmFsaWRhdGVDb250cm9scyhldmVudC5zcmNFbGVtZW50KTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoXCJzdWJtaXRcIiwgW1wiJGV2ZW50XCJdKSBzdWJtaXQoZSkge1xyXG4gICAgLy9lLmN1cnJlbnRUYXJnZXQuc3RvcFByb3BhZ2F0aW9uKCk7XHJcblxyXG4gICAgLy90aGlzLlZhbGlkYXRvckxvZ2ljLmZvcm1Db250cm9sID0gdGhpcy5jb250cm9sQ29udGFpbmVyXHJcblxyXG4gICAvLyB0aGlzLlZhbGlkYXRvckxvZ2ljLlZhbGlkYXRlQ29udHJvbHMobnVsbCk7XHJcbiAgIC8vIGUudGFyZ2V0Lm9uU3VibWl0PW51bGw7XHJcbiAgICByZXR1cm4gZmFsc2U7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDprZXlkb3duLnNoaWZ0LmY4JyxbJyRldmVudCddKSBvcGVuUGFuZWwoKXtcclxuXHJcbiAgICB0aGlzLlZhbGlkYXRvckxvZ2ljLmZvcm1Db250cm9sID0gdGhpcy5jb250cm9sQ29udGFpbmVyXHJcbiAgICB0aGlzLlZhbGlkYXRvckxvZ2ljLlRvZ2dsZVBhbmVsKCk7XHJcblxyXG4gIH1cclxuXHJcbn1cclxuXHJcblxyXG5cclxuXHJcblxyXG5cclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW25nTW9kZWxdLCBbZm9ybUNvbnRyb2xdLCBbZm9ybUNvbnRyb2xOYW1lXScsIC8vIG9yICdpbnB1dCwgc2VsZWN0LCB0ZXh0YXJlYScgLSBidXQgdGhlbiB5b3VyIGNvbnRyb2xzIHdvbid0IGJlIGhhbmRsZWQgYW5kIGFsc28gY2hlY2tpbmcgZm9yIHVuZGVmaW5lZCB3b3VsZCBiZSBuZWNlc3NhcnlcclxufSlcclxuZXhwb3J0IGNsYXNzIE5hdGl2ZUVsZW1lbnRJbmplY3RvckRpcmVjdGl2ZSB7XHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSBjb250cm9sOiBOZ0NvbnRyb2wsIEBPcHRpb25hbCgpIHByaXZhdGUgbW9kZWw6IE5nTW9kZWwpIHtcclxuICAgIHRoaXMuYXBwZW5kTmF0aXZlRWxlbWVudCgpO1xyXG5cclxuICB9XHJcblxyXG4gIEBJbnB1dCgndmFsaWRhdGlvbkNvbnRhaW5lcklkJykgdmFsaWRhdGlvbkNvbnRhaW5lcklkOnN0cmluZztcclxuXHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2NoYW5nZScsIFsnJGV2ZW50J10pIG9uQ2hhbmdlKGV2ZW50KSB7XHJcbiAgICB0aGlzLmFwcGVuZE5hdGl2ZUVsZW1lbnQoKTtcclxuXHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcblxyXG4gICAgdGhpcy5hcHBlbmROYXRpdmVFbGVtZW50KCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGFwcGVuZE5hdGl2ZUVsZW1lbnQoKSB7XHJcbiAgICBpZiAoISF0aGlzLm1vZGVsKVxyXG4gICAgICAoPGFueT50aGlzLm1vZGVsLmNvbnRyb2wpLm5hdGl2ZUVsZW1lbnQgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICBlbHNlIGlmKHRoaXMuY29udHJvbC5jb250cm9sKVxyXG4gICAgICAoPGFueT50aGlzLmNvbnRyb2wuY29udHJvbCkubmF0aXZlRWxlbWVudCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudDtcclxuXHJcblxyXG4gIH1cclxufVxyXG4iXX0=