<template> <div class="row form-group mt-3" :key="$attrs.key"> <label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'" >{{ getLabel() }}:</label > <div class="mt-2" :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"> <input @focus="clearErrors" @blur="validate" @input="$emit('oninput', $event)" @paste="$emit('oninput',$event)" @keydown.enter="$emit('keydown', $event)" class="form-control" :placeholder="localFormElement.placeholder" :type="localFormElement.type" :id="localFormElement.key" :name="localFormElement.key" v-model="textValue" /> </div> <div class="error" v-if="hasError"> {{localFormElement.validate_err?.length ? localFormElement.validate_err : $t("IsRequired") }} </div> </div> </template> <script> import formBuilderMixin from "@mixins/formBuilderMixin"; export default { mixins: [formBuilderMixin], }; </script> <style scoped lang="scss"> .form-control { position: relative !important; } .button-input { background-color: unset !important; position: absolute !important; left: 2px !important; height: 100% !important; border: 0; display: flex; justify-content: flex-end; align-items: center; } .error{ font-size: 0.8rem; color: #f04124; } </style>