ws-form-builder/src-inlined/components/ws-password-input/ws-password-input.ts

Ionic 2 Form Builder

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



@Component({
  selector: 'ws-password-input',
  template: `
    <ion-item class="ws-input {{fieldClass}}" [ngClass]="(!isFieldValid && showError) ? 'field-error' : ''">
        <ion-label color="primary" floating *ngIf="!question.hideQuestion">{{question.question}}</ion-label>
        <ion-input placeholder="{{question.placeholder}}" type="password" value="" (ionChange)="setAnswer($event, question)" ></ion-input>
    </ion-item>


    <span *ngIf="showConfirmField">
    	<ion-item class="ws-input {{fieldClass}}" [ngClass]="(!isConfirmFieldValid && showConfirmError) ? 'field-error' : ''">
    	    <ion-label color="primary" floating *ngIf="!question.hideQuestion">{{confirmLabel}}</ion-label>
    	    <ion-input placeholder="{{question.placeholder}}" type="password" [ngModel]="fieldConfirmValue" (ionChange)="setConfirmAnswer($event, question)" ></ion-input>
    	</ion-item>

    </span>
  `,
  styles: [`

  `]
})
export class WsPasswordInputComponent {

  @Input('question') question;
  @Output() answerGiven = new EventEmitter();

  fieldValue:string = '';
  fieldConfirmValue:string = '';
  isFieldValid:boolean = false;
  showError:boolean = false;

  isConfirmFieldValid:boolean = false;
  showConfirmError:boolean = false;
  showConfirmField:boolean = false;
  confirmLabel:string = '';
  errorMessage:string = '';
  fieldClass:string = '';
  
  constructor(public formBuilder: FormBuilderProvider){
    	this.fieldValue = '';
    	this.fieldConfirmValue = '';
  }

  ngOnInit() {
      if(typeof this.question.addConfirmField !== 'undefined'){
      		this.showConfirmField = this.question.addConfirmField;
      }
      if(typeof this.question.confirmLabel !== 'undefined'){
      		this.confirmLabel = this.question.confirmLabel;
      }

      if(typeof this.question.inputClass !== 'undefined'){
          this.fieldClass = this.question.inputClass;
      }

      
  }


  setConfirmAnswer(event,question){

    this.fieldConfirmValue = event.value;
    this.errorMessage = '';
  	let isStringValid = this.validateAnswer(question,event.value);
    question.valid = false;
  	//compare password fields

  	if(!isStringValid){
		this.isConfirmFieldValid = false;
  		this.showConfirmError = true;
  	}else{
		this.isConfirmFieldValid = true;
  		this.showConfirmError = false;
  	}

  	if(this.fieldValue !== this.fieldConfirmValue && this.showConfirmField !== false){
  		this.errorMessage = 'Passwords do no match!';
  		this.isConfirmFieldValid = false;
  		this.showConfirmError = true;

  	}else{
      this.isFieldValid = true;
      this.showError = false;
    }


  	if(this.isConfirmFieldValid){
  		question.value = event.value;
      question.valid = true;
  		this.answerGiven.emit(question);
  	}
  		
  }

  
  setAnswer(event,question){
    this.fieldValue = event.value;
  	this.errorMessage = '';
    question.valid = false;
  	let isStringValid = this.validateAnswer(question,event.value);

  	//compare password fields

  	if(!isStringValid){
		this.isFieldValid = false;
  		this.showError = true;
  	}else{
		  this.isFieldValid = true;
  		this.showError = false;
  	}

  
  	

  

  	if(this.isFieldValid){
  		question.value = event.value;
  		if(this.showConfirmField === false){
  			question.valid = true;
  		}
      
  		this.answerGiven.emit(question);
  	}
  		
  }


  validateAnswer(question,string){	
  		return this.formBuilder.validateAnswer(question,string);
  }

}