ws-form-builder/src-inlined/components/ws-checkbox-grid/ws-checkbox-grid.ts

Ionic 2 Form Builder

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

@Component({
  selector: 'ws-checkbox-grid',
  template: `
    <strong>{{question.question}}</strong>
    <ion-grid>
    	<ion-row>
    
    		<ion-col col-6 *ngFor="let option of question.options; let i = index;">
    			<div class="checkbox-card">
    					<ion-checkbox class='card-checkbox-area' [(ngModel)]="option.value" (ionChange)='selectOption($event, question, i, option)'></ion-checkbox>
    					<div class="checkbox-card__inner">
    						<ion-icon name="{{option.icon}}"></ion-icon>
    						<span class="option-label">{{option.label}}</span>
    					</div>
    			</div>
    		 </ion-col>
    </ion-row>
    </ion-grid>
  `,
  styles: [`

  `]
})
export class WsCheckboxGridComponent {

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

  isFieldValid:boolean = false;
  showError:boolean = false;

  constructor(public formBuilder: FormBuilderProvider){
    	
  }

  selectOption(event,question,i,option){


    let ifRequired = question.required;
    question.valid = true;
    

    let checkedCount = 0;

    for(let i=0; i < Object.keys(question.options).length; i++){
         //string = string+this.fieldAnswers[i];   
         
         if(question.options[i]['value']){
            checkedCount++;
         }
    }
    if(ifRequired){
      if(typeof question.maximumChecked !== 'undefined'){
        if(checkedCount > question.maximumChecked){
            question.valid = false;
        }
      }

      if(typeof question.minimumChecked !== 'undefined'){
        if(checkedCount < question.minimumChecked){
            question.valid = false;
        }
      }
    }

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

}