ws-form-builder
Version:
Ionic 2 Form Builder
134 lines • 7.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var form_builder_1 = require("../../providers/form-builder/form-builder");
var WsPincodeComponent = (function () {
function WsPincodeComponent(formBuilder, elementRef) {
this.formBuilder = formBuilder;
this.elementRef = elementRef;
this.answerGiven = new core_1.EventEmitter();
this.fieldValue = '';
this.isFieldValid = false;
this.showError = false;
this.pincodeLength = 4;
this.pincodeFields = [0, 1, 2, 3];
this.currentStep = 0;
this.fieldAnswers = [];
this.fieldClass = '';
this.fieldValue = '';
}
WsPincodeComponent.prototype.ngOnInit = function () {
if (typeof this.question.value !== 'undefined') {
this.fieldValue = this.question.value;
}
if (typeof this.question.inputClass !== 'undefined') {
this.fieldClass = this.question.inputClass;
}
if (typeof this.question.codeLength !== 'undefined') {
this.pincodeLength = this.question.codeLength;
var fieldCount = this.pincodeLength;
this.pincodeFields = [];
/*for(let i=0; i < fieldCount; i++){
this.pincodeFields.push(i);
}*/
}
};
WsPincodeComponent.prototype.updateString = function () {
var string = '';
var allFieldsSet = true;
string = this.pincode1['value'] + '' + this.pincode2['value'] + '' + this.pincode3['value'] + '' + this.pincode4['value'] + '' + this.pincode5['value'] + '' + this.pincode6['value'];
console.log(this.pincode1);
this.fieldValue = string;
this.question.value = this.fieldValue;
if (string.length !== this.pincodeLength) {
this.question.valid = false;
}
else {
this.question.valid = true;
}
};
WsPincodeComponent.prototype.setAnswer = function (event, question) {
var isStringValid = this.validateAnswer(question, event.value);
if (!isStringValid) {
this.isFieldValid = false;
this.showError = true;
}
else {
this.isFieldValid = true;
this.showError = false;
}
if (this.isFieldValid) {
question.value = event.value;
this.answerGiven.emit(question);
}
};
WsPincodeComponent.prototype.testAutoTab = function () {
this.pincode6['_native'].nativeElement.focus();
};
WsPincodeComponent.prototype.updateField = function (event, i) {
var autoTab = false;
if (event.value.length === 1) {
autoTab = true;
}
else if (event.value.length > 1) {
event.value = event.value.substring(1, 2);
}
var pc = this.pincode1;
if (i === 0) {
pc = this.pincode2;
}
else if (i === 1) {
pc = this.pincode3;
}
else if (i === 2) {
pc = this.pincode4;
}
else if (i === 3) {
pc = this.pincode5;
}
else if (i === 4) {
pc = this.pincode6;
}
else if (i === 5) {
//end of fields
autoTab = false;
}
this.fieldAnswers[i] = event.value;
if (autoTab) {
pc['_native'].nativeElement.focus();
}
this.updateString();
//pincode.setFocus();
};
WsPincodeComponent.prototype.validateAnswer = function (question, string) {
return this.formBuilder.validateAnswer(question, string);
};
WsPincodeComponent.prototype.focusDebug = function (e) {
console.log(e);
};
WsPincodeComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'ws-pincode',
template: "\n <div class=\"pincode-container pincode-length-{{pincodeLength}} {{fieldClass}}\">\n\n\n\n\n \t<span>\n \t\t<div class=\"pincode-holder\">\n \t\t\t<ion-input type=\"number\" min=\"0\" inputmode=\"numeric\" pattern=\"[0-9]*\" id=\"pincode-1\" #pincode1 (ionChange)=\"updateField($event,0)\"></ion-input>\n \t\t</div>\n \t</span>\n\n \t<span>\n \t\t<div class=\"pincode-holder\">\n \t\t\t<ion-input type=\"number\" min=\"0\" inputmode=\"numeric\" pattern=\"[0-9]*\" id=\"pincode-2\" #pincode2 (ionChange)=\"updateField($event,1)\"></ion-input>\n \t\t</div>\n \t</span>\n\n \t<span>\n \t\t<div class=\"pincode-holder\">\n \t\t\t<ion-input type=\"number\" min=\"0\" inputmode=\"numeric\" pattern=\"[0-9]*\" id=\"pincode-3\" #pincode3 (ionChange)=\"updateField($event,2)\"></ion-input>\n \t\t</div>\n \t</span>\n\n \t<span>\n \t\t<div class=\"pincode-holder\">\n \t\t\t<ion-input type=\"number\" min=\"0\" inputmode=\"numeric\" pattern=\"[0-9]*\" id=\"pincode-4\" #pincode4 (ionChange)=\"updateField($event,3)\"></ion-input>\n \t\t</div>\n \t</span>\n\n \t<span>\n \t\t<div class=\"pincode-holder\">\n \t\t\t<ion-input type=\"number\" min=\"0\" inputmode=\"numeric\" pattern=\"[0-9]*\" id=\"pincode-5\" #pincode5 (ionChange)=\"updateField($event,4)\"></ion-input>\n \t\t</div>\n \t</span>\n\n \t<span>\n \t\t<div class=\"pincode-holder\">\n \t\t\t<ion-input type=\"number\" min=\"0\" inputmode=\"numeric\" pattern=\"[0-9]*\" id=\"pincode-6\" #pincode6 (ionChange)=\"updateField($event,5)\"></ion-input>\n \t\t</div>\n \t</span>\n\n\n </div>\n <!--\n <button ion-button (tap)=\"testAutoTab()\">Test Autotab</button> -->\n ",
styles: ["\n .pincode-container{border:1px solid #ddd;text-align:center;padding:20px 0;margin-top:15px}.pincode-container .pincode-holder{border:1px solid #ddd;display:inline-block}.pincode-container .pincode-holder input{text-align:center;font-size:1.5em;background-color:#fff}.pincode-container.pincode-length-2 .pincode-holder{width:calc(80% / 2)}.pincode-container.pincode-length-3 .pincode-holder{width:calc(80% / 3)}.pincode-container.pincode-length-4 .pincode-holder{width:calc(80% / 4)}.pincode-container.pincode-length-5 .pincode-holder{width:calc(80% / 5)}.pincode-container.pincode-length-6 .pincode-holder{width:calc(80% / 6)}.pincode-container.pincode-length-7 .pincode-holder{width:calc(80% / 7)}.pincode-container.pincode-length-8 .pincode-holder{width:calc(80% / 8)}.pincode-container.pincode-length-9 .pincode-holder{width:calc(80% / 9)}.pincode-container.pincode-length-10 .pincode-holder{width:calc(80% / 10)}\n "]
},] },
];
/** @nocollapse */
WsPincodeComponent.ctorParameters = function () { return [
{ type: form_builder_1.FormBuilderProvider, },
{ type: core_1.ElementRef, },
]; };
WsPincodeComponent.propDecorators = {
"question": [{ type: core_1.Input, args: ['question',] },],
"answerGiven": [{ type: core_1.Output },],
"pincode1": [{ type: core_1.ViewChild, args: ['pincode1',] },],
"pincode2": [{ type: core_1.ViewChild, args: ['pincode2',] },],
"pincode3": [{ type: core_1.ViewChild, args: ['pincode3',] },],
"pincode4": [{ type: core_1.ViewChild, args: ['pincode4',] },],
"pincode5": [{ type: core_1.ViewChild, args: ['pincode5',] },],
"pincode6": [{ type: core_1.ViewChild, args: ['pincode6',] },],
};
return WsPincodeComponent;
}());
exports.WsPincodeComponent = WsPincodeComponent;
//# sourceMappingURL=ws-pincode.js.map