Facing issues with updation of the errors store.

[varghesethomase]

Describe the bug

I use svelte material ui components to display text fields. I have provided initialValues object to createForm and it contains blank strings. My use case is to have a single form with ability to dynamically add fields when I click on a button. I use felte and @felte/validator-yup to validate. Here are my observations:

1. The form is not validated when each field is blurred
2. Validation kickstarts when I try to add more input elements to form dynamically
3. When the with required attribute is blurred an error is displayed.

The version of packages used:
"felte": "^1.2.6",
"@felte/reporter-dom": "^1.1.5",
"@felte/validator-yup": "^1.0.11",

Which package/s are you using?

felte (Svelte), @felte/validator-yup, @felte/reporter-dom

Environment

• OS: MacOS
• Browser: Chrome
• Version: 110.0.5481.100

To reproduce

1. Go to the form fields and start entering values
2. You will notice that the errors appear inconsistent.
3. Tap the "Add new" button at the bottom.
4. You can see the new form fields are added but the errors all pop up at once even if they are not shown earlier.

Small reproduction example

https://codesandbox.io/p/sandbox/flamboyant-brattain-mbepnt

Screenshots

No response

Additional context

No response

[varghesethomase]

I could narrow down the issue to only form validation happening when new fields are added. The other issues were due to the value not bound to the input field. Eg: input$name="abc" should work in the above example from codesandbox. Is there a way hence to stop the validation from kickstarting when new elements are added to the form? And restrict it to only when the blurring from the respective field to be validated happens?

[pablo-abc]

Hello! I'm sorry for the delay. Trying to catch up with everything lately.

So I think the issue boils down (mainly) to the fact that smui does not forward the name prop to the inputs. Which means that, for all intents and purposes, all inputs are the same name='' to Felte. The reporter you are using "reports" based on the name but not a single input actually has a name.

This is the kind of components where I would recommend using createField to create a wrapper on top of these components.