Fix form input errors check
This commit is contained in:
parent
0b3fe43989
commit
4a46dacb99
|
@ -8,7 +8,7 @@
|
|||
|
||||
<Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
<div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
|
||||
:class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
|
||||
:class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
|
||||
@click="onSelect(option[optionKey])"
|
||||
>
|
||||
<p class="flex-grow">
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
|
||||
class="cursor-pointer relative w-full" :class="[theme.default.input,{'ring-red-500 ring-2': hasValidation && form.errors.has(name)}]"
|
||||
class="cursor-pointer relative w-full" :class="[theme.default.input,{'ring-red-500 ring-2': hasError}]"
|
||||
:style="inputStyle" @click.prevent="showUploadModal=true"
|
||||
>
|
||||
<div v-if="currentUrl==null" class="h-6 text-gray-600 dark:text-gray-400">
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<v-select v-model="selectedCountryCode" class="w-[130px]" dropdown-class="w-[300px]" input-class="rounded-r-none"
|
||||
:data="countries"
|
||||
:disabled="(disabled || countries.length===1)?true:null" :searchable="true" :search-keys="['name']" :option-key="'code'" :color="color"
|
||||
:has-error="hasValidation && form.errors.has(name)"
|
||||
:has-error="hasError"
|
||||
:placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @update:model-value="onChangeCountryCode"
|
||||
>
|
||||
<template #option="props">
|
||||
|
@ -28,7 +28,7 @@
|
|||
</template>
|
||||
</v-select>
|
||||
<input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none" :disabled="disabled?true:null"
|
||||
:class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
|
||||
:class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
|
||||
:placeholder="placeholder" :style="inputStyle" @input="onInput"
|
||||
>
|
||||
</div>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
|
||||
<vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled?true:null"
|
||||
:placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
|
||||
:placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
|
||||
:editor-toolbar="editorToolbar" class="rich-editor resize-y"
|
||||
:style="inputStyle"
|
||||
/>
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
:placeholder="placeholder"
|
||||
:uppercase-labels="uppercaseLabels"
|
||||
:theme="theme"
|
||||
:has-error="hasValidation && form.errors.has(name)"
|
||||
:has-error="hasError"
|
||||
:allow-creation="allowCreation"
|
||||
:disabled="disabled?true:null"
|
||||
:help="help"
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
|
||||
<VueSignaturePad ref="signaturePad"
|
||||
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
|
||||
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
|
||||
height="150px"
|
||||
:name="name"
|
||||
:options="{ onEnd }"
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
</template>
|
||||
|
||||
<textarea :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
|
||||
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
|
||||
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
|
||||
class="resize-y"
|
||||
:name="name" :style="inputStyle"
|
||||
:placeholder="placeholder"
|
||||
|
|
|
@ -33,7 +33,7 @@ export function useFormInput (props, context, formPrefixKey = null) {
|
|||
})
|
||||
|
||||
const hasError = computed(() => {
|
||||
return hasValidation && props.form?.errors?.has(props.name)
|
||||
return hasValidation.value && props.form?.errors?.has(props.name)
|
||||
})
|
||||
|
||||
const compVal = computed({
|
||||
|
|
Loading…
Reference in New Issue