FormRepeat - validations, add & remove rows not working correctly

[guptast]

Wappler Version : 4.9.1
Operating System : MacOS
Server Model: NodeJS
Database Type: MariaDB
Hosting Type: Local

Expected behavior

What do you think should happen?

1. When any new rows are added after Required validation has been applied on an input, adding new rows should not show Validation error.
2. When a row with Validation error is removed, it should remove the row for that index.

Actual behavior

What actually happens?

1. Any new rows added after Validation error also start showing the error. Please refer to the screenshot showing three rows. 1st row is correct. 2nd row is showing validation error correctly. But when the 3rd row is added, it also shows validation error.
2. When I remove the 3rd row with validation error, it removes the 1st row with valid data, instead of removing the 3rd row. Second screenshot shows two rows with validation error after I removed the 3rd row. The row with validation error stays in the form and it removed the 1st row with valid data.

How to reproduce

1. Add server connect form, add a formRepeat, add Select form with Required validation
2. Select valid data in the 1st row, add a new row
3. Submit the form to trigger validation
4. Add a new row - it will also show validation error
5. Remove the 3rd row - it will remove the 1st row with valid data

[guptast]

An Update:

I have found the reason for deletion of 1st row always when trying to remove from 2nd row onwards.

The $index binding to remove code was incorrect. Instead of dmx-on:click=="formRepeat1.remove($index)", the dynamic index binding had been prefixed with the ServerConnect form name plus array like this dmx-on:click="formRepeat1.remove(form_addContact.formRepeat1[0].$index)"

The rows are being removed correctly after entering the correct index binding. The validation issue still remains when adding new rows after the Required Validation has been triggered for an existing row.