ws-form-builder/src-inlined/components/ws-pincode/ws-pincode.ts

Ionic 2 Form Builder

  import { Component, Input, Output, EventEmitter,ElementRef, ViewChild } from '@angular/core';
import { FormBuilderProvider } from '../../providers/form-builder/form-builder';

@Component({
  selector: 'ws-pincode',
  template: `
    <div class="pincode-container pincode-length-{{pincodeLength}} {{fieldClass}}">




    	<span>
    		<div class="pincode-holder">
    			<ion-input type="number" min="0" inputmode="numeric" pattern="[0-9]*"  id="pincode-1" #pincode1 (ionChange)="updateField($event,0)"></ion-input>
    		</div>
    	</span>

    	<span>
    		<div class="pincode-holder">
    			<ion-input type="number" min="0" inputmode="numeric" pattern="[0-9]*"  id="pincode-2" #pincode2 (ionChange)="updateField($event,1)"></ion-input>
    		</div>
    	</span>

    	<span>
    		<div class="pincode-holder">
    			<ion-input type="number" min="0" inputmode="numeric" pattern="[0-9]*"  id="pincode-3" #pincode3 (ionChange)="updateField($event,2)"></ion-input>
    		</div>
    	</span>

    	<span>
    		<div class="pincode-holder">
    			<ion-input type="number" min="0" inputmode="numeric" pattern="[0-9]*"  id="pincode-4" #pincode4 (ionChange)="updateField($event,3)"></ion-input>
    		</div>
    	</span>

    	<span>
    		<div class="pincode-holder">
    			<ion-input type="number" min="0" inputmode="numeric" pattern="[0-9]*"  id="pincode-5" #pincode5 (ionChange)="updateField($event,4)"></ion-input>
    		</div>
    	</span>

    	<span>
    		<div class="pincode-holder">
    			<ion-input type="number" min="0" inputmode="numeric" pattern="[0-9]*"  id="pincode-6" #pincode6 (ionChange)="updateField($event,5)"></ion-input>
    		</div>
    	</span>


    </div>
    <!--
    <button ion-button (tap)="testAutoTab()">Test Autotab</button> -->
  `,
  styles: [`
    .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)}
  `]
})
export class WsPincodeComponent {
@Input('question') question;
  @Output() answerGiven = new EventEmitter();


  @ViewChild('pincode1') pincode1:ElementRef;
  @ViewChild('pincode2') pincode2:ElementRef;
  @ViewChild('pincode3') pincode3:ElementRef;
  @ViewChild('pincode4') pincode4:ElementRef;
  @ViewChild('pincode5') pincode5:ElementRef;
  @ViewChild('pincode6') pincode6:ElementRef;

  fieldValue:string = '';
  isFieldValid:boolean = false;
  showError:boolean = false;
  pincodeLength:number = 4;
  pincodeFields:any = [0,1,2,3];
  currentStep:number = 0;

  fieldAnswers:object = []
  fieldClass:string = '';
  constructor(
    public formBuilder: FormBuilderProvider,
    private elementRef : ElementRef

    ){
    	this.fieldValue = '';
  }

  

  ngOnInit() {
      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;
          let fieldCount = this.pincodeLength;
          this.pincodeFields = [];
          /*for(let i=0; i < fieldCount; i++){
              this.pincodeFields.push(i);
          }*/
      }
  }

  updateString(){
    let string = '';
    let 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;
    }
    

  }

  setAnswer(event,question){
  	let 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);
  	}
  		
  }

  testAutoTab(){
    this.pincode6['_native'].nativeElement.focus();
  }

  updateField(event,i){
    let autoTab = false;
    
    if(event.value.length === 1){
      autoTab = true;
    }else if(event.value.length > 1){
      event.value = event.value.substring(1,2);
    }


    let 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();
  }
  validateAnswer(question,string){	
  		return this.formBuilder.validateAnswer(question,string);
  }

  focusDebug(e){


    console.log(e);
  }
}