Validation / Autofill

I have a form that is hidden with an if.bind which is used to add items to a list, when you click on an add button it shows the form.

However I’m running into issues when I click on save, this adds item to an array and then the form is hidden, the model is reset and I use the reset() method on the controller. That works ok.

Then I want to add something else and click add but the form validation and any autofill styling is still there. Is there a way to force a complete rebuild of the element (I’m using a custom element for the form).

I’m using the aurelia-validation and a custom renderer to the validation styling. I’m struggling to work out where the issue is.

We have built a custom validation service as well. What we did for “resetting” the styling was re-firing the validation method that will either add/remove invalid styles. So whenever the form is active/updated/some event, we would just fire the validation method which will manage all the css styles as well as our invalid array of items.

Perhaps if you pasted your validation code here we could maybe offer some ideas?

It’s a bit tricky to unpick it, I’ll try to create a minimal repo of the issue and add it here. It’s just this one case where it goes wrong.