Adding a conditional field with a custom JS based field condition results in a frontend error

[michaeldzjap]

Bug description

Note: I filed this under bug report, but I'm not entirely sure this just isn't a missing feature or documentation problem.

I want to add a conditional field to a form using custom logic. However, this produces the following error in the console of my web browser:

alpinejs.js?v=bac7124f:430 Uncaught TypeError: Cannot read properties of undefined (reading 'state')
    at Validator.passesCustomCondition (helpers.js:46:12063)
    at Validator.passesConditions (helpers.js:46:9060)
    at FieldConditions.showField (helpers.js:46:13076)
    at [Alpine] Statamic.$conditions.showField(/{"if":"testConditio…), <anonymous>:3:53)

How to reproduce

Step 1
Add a custom JS condition (I've just followed this in order to accomplish this):

Statamic.$conditions.add('testCondition', ({ values, root, store, storeName }) => {
    return false;
});

Step 2
Add the condition to some field in a form:

tabs:
  main:
    display: Main
    sections:
      -
        fields:
          -
            handle: topic
            field:
              type: text
              display: Topic
              validate:
                - string
              if: testCondition

Step 3
Follow this to wire up the conditional fields in some Antlers template rendering the form.

Additional Info
I've done some digging into the error myself and I see that in the src for FieldConditions a new instance of Validator is created. However, only a field and values argument is passed to the constructor. Hence, the store member variable is undefined and so when this.store.state.statamic.conditions is called inside Validator#passesCustomCondition(condition) this results in the reported error.

So my question is basically: Is this just a missing feature? Or is using a custom condition for a conditional field inherently just not possible (core implementation wise)? If so, it perhaps would be good to mention this in the documentation, because at the moment this is not at all clear.

Logs

No response

Environment

Environment
Application Name: MyApp
Laravel Version: 11.36.1
PHP Version: 8.3.15
Composer Version: 2.8.4
Environment: local
Debug Mode: ENABLED
URL: myapp.test
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: redis
Database: mysql
Logs: stack / single
Mail: smtp
Queue: redis
Session: file

Statamic
Addons: 0
Sites: 1
Stache Watcher: Enabled
Static Caching: Disabled
Version: 5.45.0 PRO

Installation

Existing Laravel app

Additional details

I use a custom Laravel Sail setup to run the project locally, but this shouldn't influence the problem I am reporting in any way.

[duncanmcclean]

Unfortunatley, custom conditions only work in the Control Panel at the moment, not in the context of frontend forms. I've added a note to the docs to make it slightly clearer:

I'll move this issue to the statamic/ideas repository.