Binding to the first validation error

I’m unable to bind to the first error of a validation controller. But I can iterate the errors just fine.

In the first ‘p’ tag I have two variations of binding. Neither works by itself as well. Everything within the ‘ul’ works just fine. My use case is I don’t want to clutter the page with multiple validation errors.

<div if.bind="validationController.errors">
 <p textcontent.bind="validaitonController.errors[0].message">${validationController.errors[0].message}</p>
                    <ul if.bind="validationController.errors">
                        <li repeat.for="error of validationController.errors">
                            <p textcontent.bind="error.message"></p>
                        </li>
                    </ul>
</div>

This binding wont work if initially there are no errors because its going to be perhaps undefined[0]. Instead check that errors exists before binding. ${validationController.errors && validationsController.errors[0] ? validationController[0].message}

Replacing with the below doesn’t work either. Note I had to add the “:” part of the conditional since it demanded that.

                <p>${validationController.errors && validationController.errors[0] ? validationController.errors[0].message : test}</p>

Yep sry on phone so it must have eaten that part. Hmm can you bind instead to a getter of your VM to see whats going on with breakpoints or clogs?