ws-form-builder/src-inlined/components/ws-radio-group/ws-radio-group.ts

Ionic 2 Form Builder

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

@Component({
  selector: 'ws-radio-group',
  template: `
    <div class="{{fieldClass}}">
    	<strong *ngIf="!question.hideQuestion">{{question.question}}</strong>
    	<ion-list radio-group [(ngModel)]='fieldValue'>
    	  <ion-item *ngFor="let option of question.options">
    	    <ion-label>{{option.label}}</ion-label>
    	    <ion-radio value="{{option.value}}" (ionSelect)='selectOption($event, question)'></ion-radio>
    	  </ion-item>
    	</ion-list>

    </div>
  `,
  styles: [`

  `]
})
export class WsRadioGroupComponent {

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

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

  constructor(public formBuilder: FormBuilderProvider){
    	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;
      }
      
  }
  selectOption(event,question){
  	let isStringValid = this.validateAnswer(question,event);

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

  	if(this.isFieldValid){
  		question.value = event;
      question.valid = true;

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

}