Not getting errors back from rule validation

[davidkjackson54]

I am just picking up vee Validate and trying to perform a simple validation of the entered input field.
This is being used in a VSCode Extension that is in turn making use of a webview and using VSCode provided custom components.
My problem is that I am working with an array of embedded objects and I am creating the panel dynamically based on the array contents.
This is all working fine but I now want to add some simple validation to the fields.
I am using
script setup lang="ts"
My template section looks like this below: My problem is that the v-model is using the array structure and I am unable to find a way of making that available to the rule in the <script> section.
for example: v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value"

If it had been a single simple variable it would have been easy.
If I can get the v-model field made known to the rule, then I could simplify the v-if v-else-if as it is only exists in this current form to allow me to specify required or maxlength options etc

In my script I have this defined:
const baseArgs:any= reactive([{}]);
which I fill with this that I am passed from the VSCode Extension:
Object.assign(baseArgs,message.input.webviewbaseProfileArray);

<template>
    <div>
      <h1>Enter credentials</h1>
        <div v-if ="baseArgs[0]?.mergedArgs?.missingArgs">
          <h2>Base profile  - {{baseArgs[0].name}} </h2> 
             <template v-for = "(prof, profIndex) in baseArgs">
                <template v-for = "(item, index) in prof.mergedArgs.missingArgs">
                  <div class="align">
                    <div v-if="item.argName === 'user'">
                      <vscode-text-field maxlength="8" required v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value">
                        {{ setUpper(item.argName) }}
                      </vscode-text-field>
                    </div> 
                    <div v-else-if="item.argName === 'password'">
                      <vscode-text-field type="password" required v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value">
                        {{ setUpper(item.argName) }}
                      </vscode-text-field> 
                    </div>
                    <div v-else-if="item.dataType === 'number'">
                      <vscode-text-field type="number" v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value">
                        {{ setUpper(item.argName) }}
                      </vscode-text-field>
                    </div>
                    <div v-else-if="item.dataType === 'string'">
                      <vscode-text-field  required v-model="`baseArgs[profIndex].mergedArgs.missingArgs[index].value`">
                        {{ setUpper(item.argName) }}
                      </vscode-text-field>
                    </div>
                    <div v-else-if="item.dataType === 'boolean'">
                      <vscode-checkbox  v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value">
                        {{ setUpper(item.argName) }}
                      </vscode-checkbox>
                    </div>              
                  </div>
                </template>
              </template>  
              <div class="clear"></div> 
               
        </div>

Any suggestions on how I might possibly tackle this?

[logaretm]

How do you define your rules? Or rather what does the validation function look like, I don't see any of vee-validate API in your example.

[davidkjackson54]

@logaretm :
This is what I have tried - plus other various combinations:

function validateField(value: any) {
 console.log("value is" , value);
 if (!value) {
   return 'This field is required';
 }
 if (value.length > 8) {
   return 'This field must not exceed 8 characters';
 }
 return true;
}
</script>

<template>
   <div>
     <h1>Enter credentials</h1>
       <div v-if ="baseArgs[0]?.mergedArgs?.missingArgs">
         <h2>Base profile  - {{baseArgs[0].name}} </h2> 
         <p> Provide Base profile credentials</p>  
             <template v-for = "(prof, profIndex) in baseArgs">
               <template v-for = "(item, index) in prof.mergedArgs.missingArgs">
                 <div class="align">
                   <div v-if="item.argName === 'user'">
                     <Field name="field" as="vscode-text-field" v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value" :rules="validateField" >  
                       {{ setUpper(item.argName) }} 
                     </Field>   
                     <ErrorMessage name="field"/>
                     
                   <!-- <BaseInput v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value" type="text":label="setUpper(item.argName)"></BaseInput>
                    {{ baseArgs[profIndex].mergedArgs.missingArgs[index].value }}    just to display the data -->
                   </div> 
                   <div v-else-if="item.argName === 'password'">
           

The field is being displayed correctly

and the validateField routine is being called on each keypress

but I am not getting any error message displayed.

I think I am on the right track with this approach unless you can suggest a better suggestion.
**But not getting an error message back is an issue that I don’t see how to resolve **

As a simple test , I then tried this:

const valuex   = ref("");
const valuey   = ref("");

 <Field name="xxx" as="input" v-model="valuex" placeholder="Type something" :rules="validateField" />
 <ErrorMessage name="xxx" />
 <Field name="yyy" as="input" v-model="valuey" placeholder="Type something else" :rules="validateField" />
 <ErrorMessage name="yyy" />

Again, I was unable to have an error presented back from the validateField function.

[logaretm]

The ErrorMessage component only works within a Form component or a component that called useForm. This would cause the errors not appearing, but there might be more to it. Let's try that first and let me know.

[davidkjackson54]

@logaretm
I just found that caveat in the doc! :-)

My code looks like this:

<Field name="user" as="vscode-text-field" v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value" :rules="validateField"> {{ setUpper(item.argName) }}
</Field>
<ErrorMessage name="user" /> 

The doc seems to recommend using useField instead of

and
If I wanted to not have to use and is that possible when my ref field is an array of objects accessed with an index as shown below?

<div v-else-if="item.argName === 'password'">
              <vscode-text-field type="password" required v-model="baseArgs[profIndex].mergedArgs.missingArgs[index].value"> {{ setUpper(item.argName) }}
              </vscode-text-field>
            </div>

The example in the doc is very simple in that it assumes a simple variable - value in this example below:

<input @input="handleChange" :value="value" type="text" />
   <span>{{ errorMessage }}</span>

const { errorMessage, value, handleChange } = useField('fieldName', isRequired);
</script>

I cannot see any means of defining that const line with my very long indexed arrray object where the index etc is not available to the <script> section as it is part of a v-if in the <template....

This was the reason I was going down the <Field route.

[logaretm]

useField is meant to be used as a replacement for Field component by letting you create your own components for it. You cannot use it declaratively, but you can use it to create a declarative form component API. The docs re-write will hopefully make that clearer.

The Field component is just a wrapper around useField, so the direction is correct.