Help with validation on nested array

I am trying to add a rule on an array element and see from searching around that this may not be supported. Everything else works but adding a rule on the array item throws the following error:

Error: Unable to parse accessor function:
function (e) {
return e.buttonURL[0];

Below is a condensed code snippet, objectToAdd is spliced onto the main array.

articleElements = [];

objectToAdd = {
    text: "",
    buttonURL: [{ value: "" }, { value: "" }, { value: "" }, { value: "" }, { value: "" }]

this.articleElements.splice(this.articleElements[0], 0, this.objectToAdd);

        this.articleElementRules = ValidationRules
        .ensure(e => e.text).required()
        .withMessage('missing field')
        **.ensure((e) => e.buttonURL[0]).required()**
        .withMessage('missing field')

The view consists of a repeat.for=“articleElement of articleElements”



               <div class="input-field">
             <input value.two-way="articleElement.buttonURL[0].value & validate:articleElementsValidation" type="text">
1 Like

AFAIK the .ensure((e) => expr) only supports expr in the form obj.prop. The other patterns such as obj.prop.subprop, or obj.array[index] is not yet supported. However, a string expression should work as per my knowledge, for example: .ensure('obj.prop.subprop').

1 Like