wninputpattern
Version:
Simple directive for your input pattern.
47 lines • 5.55 kB
JavaScript
import { Directive, EventEmitter, HostListener, Input, Output, } from '@angular/core';
import * as i0 from "@angular/core";
export class EmailDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.params = '';
this.validater = new EventEmitter();
this.regEx = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
}
onIputChange(event) {
// const e = <KeyboardEvent>event;
// const ch = String.fromCharCode(e.keyCode);
// const regEx = new RegExp(this.regEx);
// if (regEx.test(ch)) {
// e.preventDefault();
// }
const inputValue = this.el.nativeElement.value;
if (!this.isValidEmail(inputValue)) {
this.renderer.setStyle(this.el.nativeElement, 'border', '1px solid red');
}
else {
this.renderer.setStyle(this.el.nativeElement, 'border', '1px solid #ccc');
}
}
isValidEmail(email) {
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(email);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: EmailDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: EmailDirective, selector: "[Email]", inputs: { params: ["specialChar", "params"] }, outputs: { validater: "validater" }, host: { listeners: { "input": "onIputChange($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: EmailDirective, decorators: [{
type: Directive,
args: [{
selector: '[Email]',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { params: [{
type: Input,
args: ['specialChar']
}], validater: [{
type: Output
}], onIputChange: [{
type: HostListener,
args: ['input', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1haWwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd25pbnB1dHBhdHRlcm4vc3JjL2xpYi9kaXJlY3RpdmVzL2VtYWlsLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULFlBQVksRUFDWixZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQzs7QUFLdkIsTUFBTSxPQUFPLGNBQWM7SUFDekIsWUFBb0IsRUFBYyxFQUFVLFFBQW1CO1FBQTNDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVSxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBRXpDLFdBQU0sR0FBVyxFQUFFLENBQUM7UUFDaEMsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDekMsVUFBSyxHQUFHLElBQUksTUFBTSxDQUFDLGtEQUFrRCxDQUFDLENBQUM7SUFKTCxDQUFDO0lBS2hDLFlBQVksQ0FBQyxLQUFVO1FBQ3hELGtDQUFrQztRQUNsQyw2Q0FBNkM7UUFDN0Msd0NBQXdDO1FBQ3hDLHdCQUF3QjtRQUN4Qix3QkFBd0I7UUFDeEIsSUFBSTtRQUNKLE1BQU0sVUFBVSxHQUFXLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQztRQUN2RCxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNsQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxRQUFRLEVBQUUsZUFBZSxDQUFDLENBQUM7U0FDMUU7YUFBTTtZQUNMLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFFBQVEsRUFBRSxnQkFBZ0IsQ0FBQyxDQUFDO1NBQzNFO0lBQ0gsQ0FBQztJQUVPLFlBQVksQ0FBQyxLQUFhO1FBQ2hDLE1BQU0sVUFBVSxHQUFXLGtEQUFrRCxDQUFDO1FBQzlFLE9BQU8sVUFBVSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNoQyxDQUFDOytHQXhCVSxjQUFjO21HQUFkLGNBQWM7OzRGQUFkLGNBQWM7a0JBSDFCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFNBQVM7aUJBQ3BCO3lIQUl1QixNQUFNO3NCQUEzQixLQUFLO3VCQUFDLGFBQWE7Z0JBQ1YsU0FBUztzQkFBbEIsTUFBTTtnQkFFNEIsWUFBWTtzQkFBOUMsWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdExpc3RlbmVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBSZW5kZXJlcjIsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbRW1haWxdJyxcbn0pXG5leHBvcnQgY2xhc3MgRW1haWxEaXJlY3RpdmUge1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIpIHt9XG5cbiAgQElucHV0KCdzcGVjaWFsQ2hhcicpIHBhcmFtczogc3RyaW5nID0gJyc7XG4gIEBPdXRwdXQoKSB2YWxpZGF0ZXIgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIHJlZ0V4ID0gbmV3IFJlZ0V4cCgvXlthLXpBLVowLTkuXyUrLV0rQFthLXpBLVowLTkuLV0rXFwuW2EtekEtWl17Mix9JC8pO1xuICBASG9zdExpc3RlbmVyKCdpbnB1dCcsIFsnJGV2ZW50J10pIG9uSXB1dENoYW5nZShldmVudDogYW55KSB7XG4gICAgLy8gY29uc3QgZSA9IDxLZXlib2FyZEV2ZW50PmV2ZW50O1xuICAgIC8vIGNvbnN0IGNoID0gU3RyaW5nLmZyb21DaGFyQ29kZShlLmtleUNvZGUpO1xuICAgIC8vIGNvbnN0IHJlZ0V4ID0gbmV3IFJlZ0V4cCh0aGlzLnJlZ0V4KTtcbiAgICAvLyBpZiAocmVnRXgudGVzdChjaCkpIHtcbiAgICAvLyAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAvLyB9XG4gICAgY29uc3QgaW5wdXRWYWx1ZTogc3RyaW5nID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50LnZhbHVlO1xuICAgIGlmICghdGhpcy5pc1ZhbGlkRW1haWwoaW5wdXRWYWx1ZSkpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAnYm9yZGVyJywgJzFweCBzb2xpZCByZWQnKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdib3JkZXInLCAnMXB4IHNvbGlkICNjY2MnKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGlzVmFsaWRFbWFpbChlbWFpbDogc3RyaW5nKTogYm9vbGVhbiB7XG4gICAgY29uc3QgZW1haWxSZWdleDogUmVnRXhwID0gL15bYS16QS1aMC05Ll8lKy1dK0BbYS16QS1aMC05Li1dK1xcLlthLXpBLVpdezIsfSQvO1xuICAgIHJldHVybiBlbWFpbFJlZ2V4LnRlc3QoZW1haWwpO1xuICB9XG59XG4iXX0=