Feature request: set conditional classes

[csakis]

It would be nic to be able to add the 'p-invalid' class to an inputText, if the field is invalid. It's possible to do this in FormKit with the simple 'type=text' field using a ternary expression:

  <FormKit
      type="text"
      name="name"
      label="Name"
      validation="required"
      :input-class="(node)=> node.context.state.valid ? '': 'p-invalid'"
      />

However, this piece of code

    <FormKit
      type="primeInputText"
      name="name"
      label="Name"
      validation="required"
      :class="(node)=> node.context.state.valid ? '': 'p-invalid'"
      />

does not work using primeInputText.

Do you have any recommendation how to add conditional classes to an element?

[sfxcode]

Hi @csakis ,

thanks for pointing this out. i added p-invalid to all input classes if not valid in the latest update. No recommendations for conditional classes at the moment, sorry.

Hope it fix your problem in some way. Please let me know,

Greetings Tom

[csakis]

Thank you for the fix. It almost works perfectly. Unfortunately, the input boxes turn red as soon as the page loads, if they are required or if they have any error in them. That's not the best UX. They should only turn red if they went through a validation, once the user touched them.

Perhaps, this would help:

const styleClass = computed(() => (context?.state.valid && !context?.state.dirty) ? attrs?.class : ${attrs?.class} p-invalid) Suggestion didn't work

[sfxcode]

Hi, try the new one with 1.0.5. Works a little better now ... hopefully

Greetings Tom

[sfxcode]

Hi, try the new one with 1.0.5. Works a little better now ... hopefully

Greetings Tom