<template>
	<div class="form-group" :class="{'has-error': form.errors.has(input_name)}">
        <label v-if="label" for="name">{{ label }}</label>
        <input type="text" 
        	:name="input_name" 
        	class="form-control" 
        	:placeholder="placeholder" 
        	v-model="form[input_name]"
        	@keydown="form.errors.clear(input_name)"
            @keypress="isNumber($event)"
            @keyup="$emit('clicked')"
            :readonly="readonly"
        	>
        <div class="text-danger text-left" v-if="form.errors.has(input_name)" v-text="form.errors.get(input_name)"></div>
    </div>
</template>

<script type="text/javascript">
	export default {
        props: {
            input_name: String,
            form: Object,
            placeholder: String,
            label: String,
            readonly: Boolean,
        },
        methods: {
            isNumber($event) {
                let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
                if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
                    $event.preventDefault();
                }
            }
        }
	}
</script>