Validation Logic

[tkamstra]

Description

When adding input tags, it would be awesome to have the ability to run logic that has the ability to stop the tag from being added

Additional context

No response

[J-Michalek]

I think the cleanest way to add it would be to do it upstream, RekaUI emits an addTag event on which you could call event.preventDefault() on if your validation logic does not pass. Perhaps a new validate event could be introduced instead of using the addTag event which as of now is just the tag instead of an event instance.

For now you could do something like the following, but it is a little rough around the edges:

<script setup lang="ts">
const tags = ref<string[]>([])

function validateTag(tag: string): boolean {
  return tag.length > 0 && tag[0] === tag[0]?.toUpperCase()
}

function onUpdateModelValue(value: string[]) {
  tags.value = value.filter(validateTag)
}
</script>

<template>
  <UInputTags
    :model-value="tags"
    @update:model-value="onUpdateModelValue"
  />
</template>