dynamically added fields are not detected by validator

[uptownhr]

Hi,

I have a form with an input field that can be added on dynamically. For example, a click to add another input field. The first input field displayed is properly detected by the Validator but additional fields added in by the click even does not.

I have an array of fields where it is looped to create the input fields and the click event will cause an additional input field to be displayed.

When I output, {{$validator | json}} i can see the initial field but not the subsequent fields.

{
  "0": {
    "required": false,
    "modified": false,
    "pristine": true,
    "dirty": false,
    "untouched": true,
    "touched": false,
    "invalid": false,
    "valid": true
  },
  "valid": true,
  "invalid": false,
  "touched": false,
  "untouched": true,
  "modified": false,
  "dirty": false,
  "pristine": true
}

I'm currently using the :field attribute and using the index of the array as the field value. No matter how many I add, validator will only show the 0 index.

[kazupon]

Thank you for your feedback. Can you share the reproduction codes with jsfiddle (or codepen ... etc) please?

[uptownhr]

i will try and get one up this week.

[kazupon]

Close (inactivity)

[SteveEdson]

Also getting the same issue, replicated here:

https://jsbin.com/fofeborivu/edit?html,output

The dynamic field gets added to the last <validator> component on the page. So if you swap the order, the new field is added to the correct location. Similarly, if there is only one section on the page, it is added in the correct place.