primevue-mirror/apps/showcase/doc/forms/dynamic/DynamicFormMessage.vue

33 lines
1.1 KiB
Vue

<template>
<Message v-if="visible" :severity>
<slot>{{ message }}</slot>
</Message>
</template>
<script setup>
import { isNotEmpty } from '@primeuix/utils';
import { computed, inject } from 'vue';
const props = defineProps({
errorType: {
type: String,
default: undefined
},
severity: {
type: String,
default: 'error'
}
});
const $pcForm = inject('$pcForm', undefined); // Inject PrimeVue Form component
const $fcDynamicFormField = inject('$fcDynamicFormField', undefined);
const fieldName = computed(() => $fcDynamicFormField?.name);
const state = computed(() => $pcForm?.states?.[fieldName.value]);
const errors = computed(() => state.value?.errors);
const invalid = computed(() => state.value?.invalid);
const error = computed(() => errors.value?.find((error) => props.errorType === error.errorType || isNotEmpty(error[props.errorType])));
const message = computed(() => (props.errorType ? error.value?.message : errors.value?.[0]?.message));
const visible = computed(() => invalid.value && (error.value || props.errorType === undefined));
</script>