angular7-pincode
Version:
a simple directive for otp input template like on mobile otp input template
98 lines • 10.1 kB
JavaScript
import { Component, Input, ViewChildren, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
export class Angular7PincodeComponent {
constructor() {
this.onFullFill = new EventEmitter();
this.size = 4;
this.class = "";
this.isOnlyNumeric = false;
this.pin = [];
this.pinCode = "";
this.currentIndex = 0;
}
ngOnInit() {
if (this.isOnlyNumeric) {
this.otpRegex = new RegExp(/[0-9]/);
}
else {
this.otpRegex = new RegExp(/[a-zA-Z0-9]/);
}
this.getPin();
}
getPin() {
for (let i = 0; i < this.size; i++) {
this.pin.push("");
}
}
onKeyUp(event, index) {
let key = event.keyCode || event.which;
if (!this.otpRegex.test(event.key)) {
event.preventDefault();
this.pin[index] = "";
return false;
}
if (key !== 8 && index != this.size - 1) {
this.currentIndex = index + 1;
setTimeout(() => {
this.allOtpInputs.toArray()[index + 1].nativeElement.focus();
}, 100);
}
this.pinCode = this.pin.join('');
if (this.pinCode.length == this.size) {
setTimeout(() => {
this.onFullFill.emit(this.pinCode);
});
}
}
onKeyDown(event, index) {
let key = event.keyCode || event.which;
if (key === 8 && index != 0) {
setTimeout(() => {
this.currentIndex = index - 1;
}, 10);
setTimeout(() => {
this.allOtpInputs.toArray()[index - 1].nativeElement.focus();
this.onFullFill.emit(null);
}, 100);
}
}
trackByFn(index) {
return index;
}
}
Angular7PincodeComponent.decorators = [
{ type: Component, args: [{
selector: 'angular7-pincode',
template: `
<div class="otp-container">
<input class="otp-input {{class}}" *ngFor="let pininput of pin;let i = index;trackBy: trackByFn" #otpInput name='otpInput{{i}}' [(ngModel)]="pin[i]" autocomplete='off' maxlength="1" [disabled]="currentIndex!=i" (keyup)="onKeyUp($event,i)" (keydown)="onKeyDown($event,i)"/>
</div>
`,
encapsulation: ViewEncapsulation.None,
styles: [`
.otp-container{
width:100%;
text-align:left;
}
.otp-input{
padding: 5px;
margin: 0px;
border: 1px solid #ddd;
border-right: none;
text-align: center;
max-width:50px;
}
.otp-input:last-child{
border-right: 1px solid #ddd;
}
`]
},] }
];
Angular7PincodeComponent.ctorParameters = () => [];
Angular7PincodeComponent.propDecorators = {
allOtpInputs: [{ type: ViewChildren, args: ['otpInput',] }],
onFullFill: [{ type: Output }],
size: [{ type: Input }],
class: [{ type: Input }],
isOnlyNumeric: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhcjctcGluY29kZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyNy1waW5jb2RlL3NyYy9saWIvYW5ndWxhcjctcGluY29kZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsWUFBWSxFQUF5QixNQUFNLEVBQUUsWUFBWSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBNEJ2SSxNQUFNLE9BQU8sd0JBQXdCO0lBV25DO1FBVFUsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDekMsU0FBSSxHQUFXLENBQUMsQ0FBQztRQUNqQixVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ25CLGtCQUFhLEdBQVksS0FBSyxDQUFDO1FBQ3hDLFFBQUcsR0FBYSxFQUFFLENBQUM7UUFDbkIsWUFBTyxHQUFXLEVBQUUsQ0FBQztRQUNyQixpQkFBWSxHQUFXLENBQUMsQ0FBQztJQUdULENBQUM7SUFFakIsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN0QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQ3JDO2FBQ0k7WUFDSCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQzNDO1FBQ0QsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ2hCLENBQUM7SUFDRCxNQUFNO1FBQ0osS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDbEMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDbkI7SUFDSCxDQUFDO0lBQ0QsT0FBTyxDQUFDLEtBQVUsRUFBRSxLQUFVO1FBQzVCLElBQUksR0FBRyxHQUFRLEtBQUssQ0FBQyxPQUFPLElBQUksS0FBSyxDQUFDLEtBQUssQ0FBQztRQUM1QyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ2xDLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNyQixPQUFPLEtBQUssQ0FBQztTQUNkO1FBQ0QsSUFBSSxHQUFHLEtBQUssQ0FBQyxJQUFJLEtBQUssSUFBSSxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsRUFBRTtZQUN2QyxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssR0FBRyxDQUFDLENBQUM7WUFDOUIsVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDZCxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDL0QsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFBO1NBQ1I7UUFDRCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2pDLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLElBQUksRUFBRTtZQUNwQyxVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNkLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUNyQyxDQUFDLENBQUMsQ0FBQTtTQUNIO0lBQ0gsQ0FBQztJQUNELFNBQVMsQ0FBQyxLQUFVLEVBQUUsS0FBVTtRQUM5QixJQUFJLEdBQUcsR0FBUSxLQUFLLENBQUMsT0FBTyxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUM7UUFDNUMsSUFBSSxHQUFHLEtBQUssQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLEVBQUU7WUFDM0IsVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDZCxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssR0FBRyxDQUFDLENBQUM7WUFDaEMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFBO1lBQ04sVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDZCxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7Z0JBQzdELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQzdCLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQTtTQUNSO0lBQ0gsQ0FBQztJQUNELFNBQVMsQ0FBQyxLQUFVO1FBQ2xCLE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQzs7O1lBdkZGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1QixRQUFRLEVBQUU7Ozs7R0FJVDtnQkFrQkQsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7eUJBakI1Qjs7Ozs7Ozs7Ozs7Ozs7OztLQWdCTjthQUVKOzs7OzJCQUVFLFlBQVksU0FBQyxVQUFVO3lCQUN2QixNQUFNO21CQUNOLEtBQUs7b0JBQ0wsS0FBSzs0QkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBWaWV3Q2hpbGRyZW4sIEVsZW1lbnRSZWYsIFF1ZXJ5TGlzdCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FuZ3VsYXI3LXBpbmNvZGUnLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgIDxkaXYgY2xhc3M9XCJvdHAtY29udGFpbmVyXCI+XHJcbiAgICA8aW5wdXQgY2xhc3M9XCJvdHAtaW5wdXQge3tjbGFzc319XCIgKm5nRm9yPVwibGV0IHBpbmlucHV0IG9mIHBpbjtsZXQgaSA9IGluZGV4O3RyYWNrQnk6IHRyYWNrQnlGblwiICNvdHBJbnB1dCBuYW1lPSdvdHBJbnB1dHt7aX19JyBbKG5nTW9kZWwpXT1cInBpbltpXVwiIGF1dG9jb21wbGV0ZT0nb2ZmJyBtYXhsZW5ndGg9XCIxXCIgW2Rpc2FibGVkXT1cImN1cnJlbnRJbmRleCE9aVwiIChrZXl1cCk9XCJvbktleVVwKCRldmVudCxpKVwiIChrZXlkb3duKT1cIm9uS2V5RG93bigkZXZlbnQsaSlcIi8+XHJcbiAgIDwvZGl2PlxyXG4gIGAsXHJcbiAgc3R5bGVzOiBbYFxyXG4gICAgLm90cC1jb250YWluZXJ7XHJcbiAgICAgIHdpZHRoOjEwMCU7XHJcbiAgICAgIHRleHQtYWxpZ246bGVmdDtcclxuICAgIH1cclxuICAgIC5vdHAtaW5wdXR7XHJcbiAgICAgIHBhZGRpbmc6IDVweDtcclxuICAgICAgbWFyZ2luOiAwcHg7XHJcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7XHJcbiAgICAgIGJvcmRlci1yaWdodDogbm9uZTtcclxuICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gICAgICBtYXgtd2lkdGg6NTBweDtcclxuICAgIH1cclxuICAgIC5vdHAtaW5wdXQ6bGFzdC1jaGlsZHtcclxuICAgICAgYm9yZGVyLXJpZ2h0OiAxcHggc29saWQgI2RkZDtcclxuICAgIH1cclxuICAgIGBdLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcclxufSlcclxuZXhwb3J0IGNsYXNzIEFuZ3VsYXI3UGluY29kZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQFZpZXdDaGlsZHJlbignb3RwSW5wdXQnKSBhbGxPdHBJbnB1dHM6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPlxyXG4gIEBPdXRwdXQoKSBvbkZ1bGxGaWxsID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcbiAgQElucHV0KCkgc2l6ZTogbnVtYmVyID0gNDtcclxuICBASW5wdXQoKSBjbGFzczogc3RyaW5nID0gXCJcIjtcclxuICBASW5wdXQoKSBpc09ubHlOdW1lcmljOiBib29sZWFuID0gZmFsc2U7XHJcbiAgcGluOiBzdHJpbmdbXSA9IFtdO1xyXG4gIHBpbkNvZGU6IHN0cmluZyA9IFwiXCI7XHJcbiAgY3VycmVudEluZGV4OiBudW1iZXIgPSAwO1xyXG4gIG90cFJlZ2V4OiBSZWdFeHA7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgaWYgKHRoaXMuaXNPbmx5TnVtZXJpYykge1xyXG4gICAgICB0aGlzLm90cFJlZ2V4ID0gbmV3IFJlZ0V4cCgvWzAtOV0vKTtcclxuICAgIH1cclxuICAgIGVsc2Uge1xyXG4gICAgICB0aGlzLm90cFJlZ2V4ID0gbmV3IFJlZ0V4cCgvW2EtekEtWjAtOV0vKTtcclxuICAgIH1cclxuICAgIHRoaXMuZ2V0UGluKCk7XHJcbiAgfVxyXG4gIGdldFBpbigpIHtcclxuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgdGhpcy5zaXplOyBpKyspIHtcclxuICAgICAgdGhpcy5waW4ucHVzaChcIlwiKTtcclxuICAgIH1cclxuICB9XHJcbiAgb25LZXlVcChldmVudDogYW55LCBpbmRleDogYW55KSB7XHJcbiAgICBsZXQga2V5OiBhbnkgPSBldmVudC5rZXlDb2RlIHx8IGV2ZW50LndoaWNoO1xyXG4gICAgaWYgKCF0aGlzLm90cFJlZ2V4LnRlc3QoZXZlbnQua2V5KSkge1xyXG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgICB0aGlzLnBpbltpbmRleF0gPSBcIlwiO1xyXG4gICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICB9XHJcbiAgICBpZiAoa2V5ICE9PSA4ICYmIGluZGV4ICE9IHRoaXMuc2l6ZSAtIDEpIHtcclxuICAgICAgdGhpcy5jdXJyZW50SW5kZXggPSBpbmRleCArIDE7XHJcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICAgIHRoaXMuYWxsT3RwSW5wdXRzLnRvQXJyYXkoKVtpbmRleCArIDFdLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcclxuICAgICAgfSwgMTAwKVxyXG4gICAgfVxyXG4gICAgdGhpcy5waW5Db2RlID0gdGhpcy5waW4uam9pbignJyk7XHJcbiAgICBpZiAodGhpcy5waW5Db2RlLmxlbmd0aCA9PSB0aGlzLnNpemUpIHtcclxuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XHJcbiAgICAgICAgdGhpcy5vbkZ1bGxGaWxsLmVtaXQodGhpcy5waW5Db2RlKTtcclxuICAgICAgfSlcclxuICAgIH1cclxuICB9XHJcbiAgb25LZXlEb3duKGV2ZW50OiBhbnksIGluZGV4OiBhbnkpIHtcclxuICAgIGxldCBrZXk6IGFueSA9IGV2ZW50LmtleUNvZGUgfHwgZXZlbnQud2hpY2g7XHJcbiAgICBpZiAoa2V5ID09PSA4ICYmIGluZGV4ICE9IDApIHtcclxuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XHJcbiAgICAgICAgdGhpcy5jdXJyZW50SW5kZXggPSBpbmRleCAtIDE7XHJcbiAgICAgIH0sIDEwKVxyXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgICB0aGlzLmFsbE90cElucHV0cy50b0FycmF5KClbaW5kZXggLSAxXS5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XHJcbiAgICAgICAgdGhpcy5vbkZ1bGxGaWxsLmVtaXQobnVsbCk7XHJcbiAgICAgIH0sIDEwMClcclxuICAgIH1cclxuICB9XHJcbiAgdHJhY2tCeUZuKGluZGV4OiBhbnkpIHtcclxuICAgIHJldHVybiBpbmRleDtcclxuICB9XHJcbn1cclxuIl19